:root{
  --ink:#120E0B; --ink2:#241C16; --ink3:#4E4238; --goud:#6E5518; --goudlicht:#C9A96E;
  --zand:#C79A5E; --papyrus:#FAF6EF; --nacht:#17120F;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body{ background:var(--papyrus); color:var(--ink); font-family:'Inter',system-ui,sans-serif;
      font-weight:400; line-height:1.62; padding-bottom:60px; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:660px; margin:0 auto; padding:0 22px; }

/* kop en fases */
.balk{ position:sticky; top:0; z-index:9; background:var(--papyrus);
       border-bottom:1px solid rgba(154,123,46,.25);
       display:flex; align-items:center; justify-content:space-between; padding:12px 22px; }
.balk .logo{ height:26px; }
.merk{ font-family:'Cormorant Garamond',serif; font-size:17px; letter-spacing:.24em; }
.terugd{ font-size:12px; color:var(--ink3); letter-spacing:.04em; }
.fase{ display:flex; background:var(--papyrus); position:sticky; top:51px; z-index:8;
       border-bottom:1px solid rgba(154,123,46,.25); }
.fase button{ flex:1; background:none; border:0; padding:11px 4px 9px; cursor:pointer;
       font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
       color:var(--ink3); border-bottom:2px solid transparent; }
.fase button.aan{ color:var(--goud); border-bottom-color:var(--goud); }
.fase button small{ display:block; font-size:8.5px; letter-spacing:.14em; opacity:.65; margin-top:3px; }
.fase button.gelezen small::after{ content:" ·"; color:var(--goud); }

/* schermen */
.scherm{ display:none; }
.scherm.aan{ display:block; animation:in .45s ease; }
@keyframes in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .scherm.aan{ animation:none; } }

h1{ font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(30px,7vw,44px);
    line-height:1.08; margin:26px 0 10px; }
.sub{ font-size:15px; color:var(--ink3); }
.sub.kalm{ margin-top:14px; }
.duur{ display:inline-block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
       color:var(--goud); border:1px solid rgba(154,123,46,.4); padding:5px 11px; margin:14px 0 24px; }
.groot{ font-family:'Cormorant Garamond',serif; font-size:clamp(22px,4.6vw,30px); line-height:1.34; margin:26px 0; }

.blokje{ margin:30px 0; }
.h{ font-family:'Cormorant Garamond',serif; font-size:clamp(21px,4vw,26px); font-weight:600; line-height:1.24; }
.t{ font-size:16.5px; color:var(--ink2); margin-top:9px; }
.pl{ font-size:13px; color:var(--goud); margin-top:10px; }

figure{ margin:30px -22px; position:relative; }
figure img{ width:100%; display:block; }
figure figcaption{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(23,18,15,.22),rgba(23,18,15,.62));
  font-family:'Cormorant Garamond',serif; font-style:italic; color:#F4E9D2; text-align:center;
  font-size:clamp(19px,4vw,26px); line-height:1.42; padding:0 30px; }

.stil{ background:var(--nacht); color:#F4E9D2; padding:34px 26px; margin:34px -22px; text-align:center; }
.stil em{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:21px; color:var(--goudlicht); }

.laag{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--goud);
       border-bottom:1px solid rgba(154,123,46,.28); padding-bottom:7px; margin:30px 0 14px; }
.getallen{ display:flex; gap:8px; margin:10px 0 14px; }
.getal{ flex:1; text-align:center; background:rgba(199,154,94,.18); padding:14px 4px; }
.getal b{ font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:400; color:var(--goud);
          display:block; line-height:1; }
.getal small{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);
              display:block; margin-top:6px; }
.vel{ border:1px solid rgba(154,123,46,.35); padding:10px; background:#fff; }
.vel img{ width:100%; display:block; }

.index{ border-top:1px solid rgba(199,154,94,.45); }
.index a, .index span.rij{ width:100%; display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; border-bottom:1px solid rgba(199,154,94,.45); padding:14px 0; font-size:15.5px; cursor:pointer; }
.index em{ font-style:normal; font-size:11.5px; color:var(--goud); letter-spacing:.08em; white-space:nowrap; }

.knoppen{ display:flex; gap:10px; margin:30px 0 8px; flex-wrap:wrap; }
.knoppen.strak{ margin-top:0; }
.knop{ flex:1; min-width:150px; padding:16px; background:var(--nacht); color:var(--papyrus); border:0;
  font-family:'Inter',system-ui,sans-serif; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; text-align:center; }
.knop.licht{ background:none; color:var(--ink3); border:1px solid rgba(154,123,46,.4); }
.knop.goud{ background:var(--goud); color:#FFF8EC; }
.knop:focus-visible{ outline:2px solid var(--goud); outline-offset:2px; }

footer{ margin:44px 0 24px; border-top:1px solid rgba(154,123,46,.3); padding-top:16px;
  font-size:11.5px; color:var(--ink3); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer em{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--goud); font-style:italic; }

@media print{
  figure figcaption{ position:static; background:none; color:var(--ink); padding:10px 0; }
}

.pkaarten{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px; }
@media (max-width:900px){ .pkaarten{ grid-template-columns:1fr; } }
.pkaart{ border-top:2px solid rgba(154,123,46,.45); padding:16px 0 4px; }
.pkop{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pkop b{ font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:400; }
.pel{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:3px 9px;
      border:1px solid currentColor; border-radius:2px; }
.pel.vuur,.pel.fire{ color:#A8471E; } .pel.aarde,.pel.earth{ color:#5C6B3A; }
.pel.lucht,.pel.air{ color:#3F6076; } .pel.water{ color:#2E5A6B; }
.ppos{ font-size:13px; color:var(--goud); margin-top:4px; letter-spacing:.02em; }
.palg{ font-size:14.5px; color:var(--ink2); margin-top:10px; }
.ppers{ font-size:15px; color:var(--ink); margin-top:8px; }
.ptrek{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.ptrek span{ font-size:12px; letter-spacing:.04em; background:rgba(199,154,94,.22);
             padding:4px 10px; color:var(--ink2); }
.ptabel{ width:100%; border-collapse:collapse; margin-top:6px; }
.ptabel td{ font-size:14.5px; padding:9px 10px 9px 0; border-bottom:1px solid rgba(199,154,94,.45); color:var(--ink); }
.ptabel td.n{ font-family:'Cormorant Garamond',serif; font-size:17px; width:16%; }
.ptabel td.g{ width:19%; } .ptabel td.h{ width:5%; text-align:center; color:var(--goud); }
.ptabel td.el{ width:10%; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.ptabel td.d{ width:20%; } .ptabel td.tr{ color:var(--ink2); }
@media (max-width:700px){ .ptabel td.d{ display:none } }
.wiel svg{ width:100%; height:auto; }
.getallen{ display:flex; gap:10px; }
.getal{ flex:1; text-align:center; background:rgba(217,177,122,.18); padding:16px 6px; }
.getal b{ font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:400; color:var(--goud); display:block; line-height:1; }
.getal small{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); display:block; margin-top:8px; }
.ritme{ margin-top:20px; }
.ritmerij{ display:flex; border-top:1px solid rgba(154,123,46,.28); }
.jr{ flex:1; padding:12px 8px 10px; border-left:1px solid rgba(217,177,122,.4); }
.jr:first-child{ border-left:0; }
.jr b{ font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:400; display:block; line-height:1; }
.jr i{ font-style:normal; font-size:10px; color:var(--ink3); display:block; margin-top:3px; }
.jr u{ display:block; border-bottom:1px solid rgba(122,106,94,.35); height:16px; text-decoration:none; }
.jr.een{ background:rgba(201,154,18,.12); } .jr.negen{ background:rgba(217,177,122,.2); }
.jr.nu{ background:#17120F; color:#F6F0E7; } .jr.nu i{ color:rgba(246,240,231,.6); }
.jr.nu u{ border-color:rgba(246,240,231,.4); }
.kopjes{ display:flex; }
.kopjes div{ flex:1; padding:0 8px 8px; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--goud); }
@media (max-width:700px){ .kopjes{ display:none } .jr b{ font-size:13px } .jr{ padding:8px 4px } }

/* ── fases met slot ─────────────────────────────────────────── */
.fase button.slot{ opacity:.42; }
.fase button.slot::after{ content:" ·"; }
.slotmelding{ background:rgba(199,154,94,.16); border-left:2px solid var(--goud);
  padding:12px 14px; font-size:14px; color:var(--ink2); margin:18px 0; }

/* ── blokken uit de one-pager ───────────────────────────────── */
.wiel{ margin:22px 0; }
.wiel svg{ width:100%; height:auto; display:block; }
.ritme{ margin-top:18px; }
.kopjes{ display:flex; margin-top:10px; }
.kopjes div{ flex:1; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--goud); padding-right:6px; }
.kopjes em{ display:block; font-style:normal; font-size:10.5px; letter-spacing:0;
  text-transform:none; color:var(--ink3); margin-top:3px; line-height:1.3; }
.maanrij{ display:flex; gap:16px; align-items:flex-start; margin-top:14px; }
.maanrij svg{ flex:0 0 78px; }
.keuze{ display:block; width:100%; text-align:left; background:#fff; cursor:pointer;
  border:1px solid rgba(199,154,94,.5); padding:18px; margin-bottom:12px; }
.keuze b{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:21px; display:block; }
.keuze span{ font-size:14.5px; color:var(--ink2); display:block; margin-top:6px; }
.keuze i{ font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--goud); display:block; margin-top:12px; }

/* ── drempelpagina ──────────────────────────────────────────── */
.drempel{ position:fixed; inset:0; z-index:20; background:#000;
  display:flex; align-items:center; justify-content:center; padding:30px 24px;
  animation:in .6s ease; }
.dbinnen{ max-width:440px; text-align:center; color:#F4E9D2; }
.dbinnen img{ height:52px; margin-bottom:22px; filter:brightness(1.7); }
.dlbl{ display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--goudlicht); margin-bottom:14px; }
.dbinnen h1{ font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(34px,9vw,50px); line-height:1.08; margin:0 0 16px; color:#F4E9D2; }
.dbinnen p{ font-size:16px; color:rgba(244,233,210,.82); margin-bottom:30px; }
.dbinnen .knop{ background:var(--goud); color:#FFF8EC; min-width:220px; }
.dbinnen em{ display:block; margin-top:30px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:19px; color:var(--goudlicht); }
.dbinnen small{ display:block; margin-top:8px; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(244,233,210,.45); }

.dbinnen{ max-width:640px; }
.dvideo{ width:100%; display:block; margin:0 auto 26px; background:#000;
  border:1px solid rgba(201,169,110,.35); }
@media (max-width:600px){ .dvideo{ margin-bottom:20px; } }

/* startscherm: zwart, goud, crème */
.drempel{ overflow-y:auto; }
.dvideo{ border:0; box-shadow:0 0 60px rgba(201,169,110,.14); }
.dbinnen img{ filter:none; }
.dbinnen h1{ color:#F6F0E7; }
.dbinnen p{ color:rgba(246,240,231,.72); }
.dbinnen .knop{ background:none; color:#E8CE98; border:1px solid rgba(201,169,110,.55);
  letter-spacing:.22em; }
.dbinnen .knop:hover{ background:rgba(201,169,110,.12); }
.dbinnen em{ color:#C9A96E; }
.dbinnen small{ color:rgba(246,240,231,.4); }

.drempel[hidden]{ display:none !important; }

.afsluiter{ text-align:center; margin:38px 0 30px; }
.afsluiter em{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(20px,4.4vw,26px); color:var(--goud); display:block; }
.afsluiter small{ display:block; margin-top:8px; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink3); }

.keuze.stil-kaart{ cursor:default; }

/* ── welkomstscherm ─────────────────────────────────────────── */
.drempel{ background:#0A0705; padding:0; display:flex; align-items:center;
  justify-content:center; overflow:auto; }
.dbg{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; }
.dwaas{ position:fixed; inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(10,7,5,.30) 0%, rgba(10,7,5,.72) 70%, rgba(10,7,5,.88) 100%); }
.dfases{ position:absolute; top:26px; right:34px; z-index:2; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(246,240,231,.8); }
.dvoet{ position:absolute; bottom:22px; right:34px; z-index:2; font-size:9.5px;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(246,240,231,.45); }
.dbinnen{ position:relative; z-index:2; max-width:660px; text-align:center;
  padding:56px 26px 48px; }
.dmerk{ margin-bottom:34px; }
.dmerk img{ height:64px; display:block; margin:0 auto 10px; filter:none; }
.dmerk b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(30px,5vw,44px); letter-spacing:.28em; color:#F3E6C8; text-indent:.28em; }
.dmerk span{ display:block; margin-top:8px; font-size:9.5px; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(232,206,152,.75); }
.dvideo{ width:100%; max-width:470px; margin:0 auto 34px; border:1px solid rgba(201,169,110,.5);
  box-shadow:0 18px 60px rgba(0,0,0,.6); background:#000; display:block; }
.dbinnen h1{ font-size:clamp(38px,7vw,62px); margin:0 0 18px; color:#FBF6EC; }
.dbinnen p{ font-size:16.5px; line-height:1.75; color:rgba(246,240,231,.8); margin-bottom:34px; }
.dbinnen .knop{ display:inline-flex; align-items:center; gap:14px; min-width:0;
  padding:17px 34px; background:rgba(10,7,5,.35); border:1px solid rgba(201,169,110,.65);
  color:#EFDCAE; letter-spacing:.22em; }
.dbinnen .knop i{ font-style:normal; }
.dbinnen .knop:hover{ background:rgba(201,169,110,.14); }
.druit{ margin:34px 0 14px; color:rgba(201,169,110,.55); font-size:11px; }
.dbinnen em{ margin-top:0; font-size:clamp(17px,2.4vw,21px); }
@media (max-width:600px){
  .dfases{ position:static; margin:22px auto 0; text-align:center; font-size:8.5px; letter-spacing:.22em; }
  .dvoet{ display:none; }
  .dbinnen{ padding:20px 22px 44px; }
  .dmerk{ margin-bottom:26px; }
}

/* het welkomstscherm past nu in beeld, met lucht bovenaan */
.drempel{ align-items:flex-start; }
.dbinnen{ padding-top:clamp(34px,7vh,86px); padding-bottom:clamp(30px,6vh,60px); }
.dmerk{ margin-bottom:clamp(18px,3vh,32px); }
.dmerk img{ height:clamp(40px,6vh,62px); }
.dmerk b{ font-size:clamp(26px,4.4vh,42px); }
.dvideo{ max-height:36vh; width:auto; max-width:min(470px,88vw); margin-bottom:clamp(20px,3.4vh,32px); }
.dbinnen h1{ font-size:clamp(32px,6.4vh,58px); margin-bottom:clamp(10px,1.6vh,18px); }
.dbinnen p{ margin-bottom:clamp(20px,3.4vh,32px); }
.druit{ margin:clamp(18px,3vh,32px) 0 12px; }

/* ══ donkere fasepagina's met zijbalk ══════════════════════ */
:root{
  --ink:#F6F0E7; --ink2:rgba(246,240,231,.84); --ink3:rgba(246,240,231,.58);
  --goud:#C9A96E; --goudlicht:#E8CE98; --papyrus:#0D0A07;
}
body{ background:#0D0A07; color:var(--ink); padding-bottom:0; }

.zijbalk{ position:fixed; left:0; top:0; bottom:0; width:196px; z-index:6;
  background:linear-gradient(180deg,#120E0A,#0A0705); border-right:1px solid rgba(201,169,110,.18);
  padding:30px 22px; display:flex; flex-direction:column; }
.zmerk{ text-align:center; margin-bottom:38px; }
.zmerk img{ height:46px; display:block; margin:0 auto 8px; }
.zmerk b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:26px; letter-spacing:.26em; text-indent:.26em; color:#F3E6C8; }
.zmerk span{ display:block; margin-top:6px; font-size:7px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(232,206,152,.65); }

.fase{ display:block; border:0; background:none; position:static; }
.fase button{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:0 0 26px; border:0; position:relative; color:var(--ink3); }
.fase button::before{ content:""; position:absolute; left:14px; top:30px; bottom:6px;
  width:1px; background:rgba(201,169,110,.3); }
.fase button:last-child::before{ display:none; }
.fase button i{ flex:0 0 29px; height:29px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(201,169,110,.45); font-style:normal; font-size:12px;
  font-family:'Cormorant Garamond',serif; color:var(--goudlicht); background:#0D0A07; }
.fase button u{ display:block; text-decoration:none; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; }
.fase button small{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  margin-top:2px; opacity:.75; }
.fase button div{ display:block; }
.fase button.aan{ color:#F6F0E7; }
.fase button.aan i{ border-color:var(--goudlicht); box-shadow:0 0 14px rgba(201,169,110,.45);
  color:#FBF3E0; }
.fase button.slot{ opacity:.45; }

.zijbalk .terugd{ margin-top:auto; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3); }
.zslot{ display:block; margin-top:18px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:15px; letter-spacing:.06em; color:var(--goud); }

.zfases{ position:fixed; top:24px; right:34px; z-index:5; font-size:9.5px;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(246,240,231,.6); }

.wrap{ margin:0 0 0 196px; max-width:none; padding:0 clamp(22px,5vw,70px) 60px; }
@media (max-width:820px){
  .zijbalk{ position:static; width:auto; flex-direction:row; align-items:center; gap:16px;
    padding:14px 18px; border-right:0; border-bottom:1px solid rgba(201,169,110,.18); }
  .zmerk{ margin:0; }
  .zmerk img{ height:26px; } .zmerk b{ font-size:17px; } .zmerk span{ display:none; }
  .fase{ display:flex; gap:6px; margin-left:auto; }
  .fase button{ padding:0; flex-direction:column; gap:4px; }
  .fase button::before{ display:none; }
  .fase button u{ display:none; }
  .zijbalk .terugd, .zslot, .zfases{ display:none; }
  .wrap{ margin:0; }
}

/* hero bovenaan elke fase */
.hero{ position:relative; margin:0 calc(-1 * clamp(22px,5vw,70px)) clamp(26px,4vw,44px);
  min-height:clamp(280px,46vh,440px); display:flex; align-items:center; }
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .hwaas{ position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(13,10,7,.94) 0%,rgba(13,10,7,.78) 42%,rgba(13,10,7,.25) 100%); }
.hero .htekst{ position:relative; padding:clamp(28px,5vw,54px) clamp(22px,5vw,70px); max-width:640px; }
.hlabel{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--goudlicht); }
.hero h1{ margin:10px 0 0; font-size:clamp(38px,7vw,72px); color:#FBF6EC; }
.hlijn{ width:64px; height:1px; background:rgba(201,169,110,.7); margin:18px 0; }
.hsub{ font-family:'Cormorant Garamond',serif; font-size:clamp(19px,2.6vw,26px); color:#F3E6C8; }
.hintro{ font-size:15.5px; color:var(--ink2); margin-top:14px; line-height:1.7; }

/* overzichtskaarten */
.okop{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(20px,2.6vw,26px);
  color:var(--goudlicht); margin:clamp(20px,3vw,34px) 0 16px; }
.okaarten{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .okaarten{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .okaarten{ grid-template-columns:1fr; } }
.okaart{ display:block; border:1px solid rgba(201,169,110,.28); background:rgba(255,255,255,.03);
  overflow:hidden; transition:border-color .2s, transform .2s; }
.okaart:hover{ border-color:rgba(201,169,110,.75); transform:translateY(-2px); }
.okaart img{ width:100%; height:132px; object-fit:cover; display:block; }
.okaart .otekst{ padding:14px 16px 18px; }
.okop2{ display:flex; align-items:baseline; gap:10px; }
.okop2 b{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:19px; color:#F6F0E7; }
.onr{ font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--goud); }
.opijl{ margin-left:auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(201,169,110,.5); color:var(--goudlicht); font-size:11px; }
.okaart p{ font-size:13.5px; color:var(--ink3); margin-top:7px; line-height:1.55; }

/* donkere inhoud */
.pkaart, .blokje, .kaart{ color:var(--ink); }
.pkaart{ border-top-color:rgba(201,169,110,.4); }
.pel.vuur,.pel.fire{ color:#E08A5A; } .pel.aarde,.pel.earth{ color:#A9BE7C; }
.pel.lucht,.pel.air{ color:#8FB6CE; } .pel.water{ color:#7FC0D0; }
.ptrek span{ background:rgba(201,169,110,.16); color:var(--ink2); }
.getal{ background:rgba(201,169,110,.12); }
.vel{ background:rgba(255,255,255,.04); border-color:rgba(201,169,110,.3); }
.keuze{ background:rgba(255,255,255,.03); border-color:rgba(201,169,110,.3); }
.keuze b{ color:#F6F0E7; }
.stil{ background:rgba(201,169,110,.08); border:1px solid rgba(201,169,110,.3); }
.index a, .index span.rij{ border-bottom-color:rgba(201,169,110,.25); }
.index{ border-top-color:rgba(201,169,110,.25); }
.knop{ background:rgba(201,169,110,.14); color:#EFDCAE; border:1px solid rgba(201,169,110,.55); }
.knop.goud{ background:rgba(201,169,110,.3); }
.knop.licht{ background:none; }
.duur{ border-color:rgba(201,169,110,.4); color:var(--goudlicht); }
.laag{ border-bottom-color:rgba(201,169,110,.28); }
.wiel svg text{ fill:#C9A96E; }
footer{ border-top-color:rgba(201,169,110,.25); }
.slotmelding{ background:rgba(201,169,110,.12); color:var(--ink2); }

/* kaarten als knop */
.okaart{ cursor:pointer; text-align:left; padding:0; font-family:inherit; color:inherit;
  background:rgba(255,255,255,.03); width:100%; }
.okaart img{ height:150px; }
.okaart .otekst{ display:block; padding:14px 16px 18px; }
.okaart .okop2{ display:flex; align-items:baseline; gap:10px; }
.okaart .okrt{ display:block; font-size:13.5px; color:var(--ink3); margin-top:7px; line-height:1.55; }
.okaart.aan{ border-color:var(--goudlicht); box-shadow:0 0 0 1px rgba(201,169,110,.5), 0 0 30px rgba(201,169,110,.18); }
.okaart.aan .opijl{ background:rgba(201,169,110,.25); }

/* uitklappaneel onder het raster */
.opaneel:empty{ display:none; }
.okruimel{ margin-top:26px; border-top:1px solid rgba(201,169,110,.3);
  padding-top:22px; animation:in .4s ease; }
.okruim{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.opad{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); }
.osluit{ margin-left:auto; background:none; border:1px solid rgba(201,169,110,.4);
  color:var(--goudlicht); font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; padding:8px 14px; cursor:pointer; }
.okop3{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.onr.groot{ font-size:clamp(34px,5vw,52px); line-height:1; }
.okop3 h2{ font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(26px,4.4vw,40px); margin:0; color:#FBF6EC; }
.okop3 .hsub{ margin-top:8px; font-size:clamp(16px,2.2vw,20px); }
.okop3 blockquote{ margin:0 0 0 auto; max-width:320px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:17px; color:var(--goudlicht); border-left:1px solid rgba(201,169,110,.4);
  padding-left:16px; }
@media (max-width:700px){ .okop3 blockquote{ margin:14px 0 0; } }

/* kaartenrij wordt smal zodra er een stap openstaat */
.okaarten.strip{ grid-template-columns:repeat(6,1fr); gap:10px; }
.okaarten.strip .okaart img{ height:96px; }
.okaarten.strip .otekst{ padding:10px 11px 13px; }
.okaarten.strip .okop2 b{ font-size:14px; }
.okaarten.strip .onr{ font-size:15px; }
.okaarten.strip .opijl{ width:18px; height:18px; font-size:10px; }
.okaarten.strip .okrt{ font-size:11.5px; line-height:1.45; margin-top:5px; }
@media (max-width:1100px){ .okaarten.strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .okaarten.strip{ grid-template-columns:1fr 1fr; } }

/* het uitklappaneel als eigen vlak met beeld */
.okruimel{ position:relative; margin-top:22px; padding:clamp(24px,3.4vw,44px);
  border:1px solid rgba(201,169,110,.4); border-top-width:1px; overflow:hidden;
  background:linear-gradient(96deg,rgba(10,7,5,.97) 0%,rgba(10,7,5,.93) 46%,rgba(10,7,5,.55) 100%),
    var(--paneelbeeld) right center / cover no-repeat, #0D0A07; }
.okruimel > *{ position:relative; max-width:660px; }
.okruimel .knoppen{ max-width:none; }
.okruim{ margin-bottom:22px; }
.opad{ letter-spacing:.26em; }
.okop3{ display:block; margin-bottom:22px; }
.okop3 .onr.groot{ display:none; }
.okop3 h2{ font-size:clamp(30px,5vw,46px); }
.okop3 blockquote{ position:absolute; top:clamp(24px,3.4vw,44px); right:clamp(24px,3.4vw,44px);
  max-width:190px; font-size:11px; font-family:'Inter',system-ui,sans-serif; font-style:normal;
  letter-spacing:.22em; text-transform:uppercase; line-height:2; border-left:0;
  text-align:right; color:rgba(232,206,152,.85); }
@media (max-width:820px){ .okop3 blockquote{ position:static; text-align:left; max-width:none;
  margin-top:14px; } }

/* herkenningslijst */
.lkop{ display:flex; align-items:center; gap:16px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:clamp(19px,2.4vw,24px); color:var(--goudlicht);
  margin:30px 0 16px; }
.lkop span{ flex:1; max-width:140px; height:1px; background:rgba(201,169,110,.5); }
ul.lijst{ list-style:none; margin:0; padding:0; }
ul.lijst li{ display:flex; align-items:flex-start; gap:14px; padding:11px 0;
  border-bottom:1px solid rgba(201,169,110,.18); font-size:15.5px; color:var(--ink2); }
ul.lijst li i{ flex:0 0 20px; height:20px; margin-top:1px; border-radius:50%;
  border:1px solid rgba(201,169,110,.55); display:grid; place-items:center;
  font-style:normal; font-size:11px; color:var(--goudlicht); }

/* herinneringskader */
.herinnering{ display:flex; gap:20px; align-items:center; margin:30px 0;
  padding:22px 26px; border:1px solid rgba(201,169,110,.55);
  background:linear-gradient(120deg,rgba(201,169,110,.16),rgba(201,169,110,.05)); }
.hsymbool{ font-size:40px; line-height:1; color:var(--goudlicht); }
.hlbl{ display:block; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,206,152,.8); margin-bottom:8px; }
.herinnering em{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(18px,2.6vw,23px); color:#FBF3E0; }

/* invoerveld */
.invoer{ position:relative; }
.invoer textarea{ width:100%; background:rgba(255,255,255,.03);
  border:1px solid rgba(201,169,110,.35); color:var(--ink); padding:16px 46px 16px 18px;
  font-family:'Inter',system-ui,sans-serif; font-size:15px; resize:vertical; }
.invoer textarea::placeholder{ color:rgba(246,240,231,.35); }
.invoer textarea:focus{ outline:0; border-color:rgba(201,169,110,.7); }
.invoer i{ position:absolute; right:16px; top:16px; font-style:normal;
  color:var(--goudlicht); opacity:.7; }

/* navigatie onderaan het paneel */
.okruimel .knoppen{ margin-top:32px; justify-content:space-between; }
.okruimel .knop{ flex:0 0 auto; min-width:0; border-radius:999px; padding:15px 28px; }

/* paneel: beeld rechts, tekst links, zoals het ontwerp */
.okruimel{ background:
  linear-gradient(100deg, rgba(8,6,4,.985) 0%, rgba(8,6,4,.97) 38%,
    rgba(8,6,4,.72) 58%, rgba(8,6,4,.20) 80%, rgba(8,6,4,0) 100%),
  var(--paneelbeeld) right center / cover no-repeat, #0D0A07;
  min-height:600px; }
.okruimel > *{ max-width:58%; }
@media (max-width:1000px){
  .okruimel{ background:
    linear-gradient(180deg, rgba(8,6,4,.97) 0%, rgba(8,6,4,.94) 62%, rgba(8,6,4,.55) 100%),
    var(--paneelbeeld) center bottom / cover no-repeat, #0D0A07; min-height:0; }
  .okruimel > *{ max-width:none; }
}

/* leestekst in het paneel */
.okruimel .blokje{ margin:0 0 18px; }
.okruimel .t{ font-family:'Cormorant Garamond',serif; font-size:clamp(17px,1.5vw,20.5px);
  line-height:1.62; color:rgba(246,240,231,.9); margin-top:0; }
.okruimel .okop3 h2{ margin-bottom:6px; }
.okruimel .okop3 .hsub{ font-family:'Cormorant Garamond',serif; color:var(--goudlicht);
  font-size:clamp(20px,2.4vw,27px); }
.okruimel .lkop{ margin-top:34px; }
.okruimel ul.lijst li{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,1.5vw,19px);
  color:rgba(246,240,231,.92); }
.okruimel ul.lijst li i{ margin-top:3px; }
.okruimel .herinnering{ border-color:rgba(201,169,110,.6);
  background:linear-gradient(115deg, rgba(58,42,18,.85), rgba(28,20,10,.7)); }
.okruimel .invoer textarea{ font-family:'Cormorant Garamond',serif; font-size:17px; }
.okruimel .opad{ color:rgba(246,240,231,.72); }
.okruimel .okop3 blockquote{ line-height:2.1; }

/* zijbalk met regel onder de fasenaam */
.fase button u{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--goudlicht); }
.fase button small{ text-transform:none; letter-spacing:.02em; font-size:12.5px;
  font-family:'Cormorant Garamond',serif; opacity:.85; margin-top:3px; }
.fase button.aan u{ color:#FBF3E0; }

/* hero met vraag in goud */
.hvraag{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(20px,2.8vw,29px); color:var(--goudlicht); margin-top:4px; }
.hero .hsub{ margin-top:6px; }

/* uitleg in twee kolommen */
.tweeluik{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(26px,5vw,64px);
  padding:clamp(22px,3vw,36px) 0 clamp(26px,4vw,44px);
  border-bottom:1px solid rgba(201,169,110,.3); }
@media (max-width:820px){ .tweeluik{ grid-template-columns:1fr; } }
.tlinks h2{ font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(24px,3.4vw,34px); color:#FBF6EC; margin:0 0 14px; line-height:1.2; }
.tlinks h2 em{ font-style:italic; }
.tlinks p{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,1.6vw,19px);
  line-height:1.6; color:rgba(246,240,231,.86); }
.ticonen{ display:flex; gap:clamp(24px,4vw,54px); margin-top:26px; }
.ticonen div{ text-align:center; }
.ticonen span{ display:block; font-size:26px; color:var(--goudlicht); line-height:1; }
.ticonen small{ display:block; margin-top:9px; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3); }
.trechts{ border-left:1px solid rgba(201,169,110,.25); padding-left:clamp(22px,3vw,44px); }
@media (max-width:820px){ .trechts{ border-left:0; padding-left:0; } }
.trechts .lkop{ margin:0 0 18px; font-style:normal; font-size:clamp(20px,2.6vw,26px);
  font-family:'Cormorant Garamond',serif; color:#FBF6EC; }
ol.tstappen{ list-style:none; margin:0; padding:0; }
ol.tstappen li{ display:flex; align-items:center; gap:16px; padding:10px 0;
  font-family:'Cormorant Garamond',serif; font-size:clamp(16px,1.6vw,19px);
  color:rgba(246,240,231,.9); }
ol.tstappen li i{ flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(201,169,110,.5); font-style:normal; font-size:14px;
  font-family:'Cormorant Garamond',serif; color:var(--goudlicht); }
.tslot{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(201,169,110,.3);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(16px,1.8vw,20px); color:var(--goudlicht); }
.okop{ font-style:normal; font-family:'Cormorant Garamond',serif; color:var(--goudlicht);
  font-size:clamp(19px,2.2vw,24px); }

/* rustiger tekstmaten op grote schermen */
.wrap{ max-width:1500px; }
.hero h1{ font-size:clamp(34px,5vw,58px); }
.hero .hsub{ font-size:clamp(17px,1.9vw,23px); }
.hvraag{ font-size:clamp(18px,2vw,25px); }
.groot{ font-size:clamp(19px,2.1vw,25px); max-width:900px; }
.tlinks h2{ font-size:clamp(21px,2.4vw,29px); }
.tlinks p{ font-size:clamp(15px,1.15vw,17px); }
.trechts .lkop{ font-size:clamp(18px,2vw,23px); }
ol.tstappen li{ font-size:clamp(15px,1.15vw,17px); }
ol.tstappen li i{ flex-basis:28px; height:28px; font-size:13px; }
.tslot{ font-size:clamp(15px,1.4vw,18px); }
.okop{ font-size:clamp(17px,1.7vw,21px); }
.okaart .okop2 b{ font-size:17px; }
.okaart .okrt{ font-size:13px; }
.okruimel .t{ font-size:clamp(16px,1.15vw,18px); }
.okruimel ul.lijst li{ font-size:clamp(15px,1.1vw,17.5px); }
.okop3 h2{ font-size:clamp(26px,3.4vw,38px); }
.okruimel .okop3 .hsub{ font-size:clamp(18px,1.9vw,23px); }
.herinnering em{ font-size:clamp(17px,1.7vw,21px); }
.ticonen span{ font-size:23px; }

/* mobiel: beeld naar links schuiven zodat het lichte deel in beeld komt */
@media (max-width:1000px){
  .okruimel{ background:
    linear-gradient(180deg, rgba(8,6,4,.90) 0%, rgba(8,6,4,.84) 55%, rgba(8,6,4,.62) 100%),
    var(--paneelbeeld) 78% center / cover no-repeat, #0D0A07; }
}
@media (max-width:600px){
  .okruimel{ background:
    linear-gradient(180deg, rgba(8,6,4,.88) 0%, rgba(8,6,4,.80) 55%, rgba(8,6,4,.58) 100%),
    var(--paneelbeeld) 88% center / cover no-repeat, #0D0A07; }
}

/* drie iconen naast elkaar */
.drieiconen{ display:flex; gap:0; margin:30px 0; }
.drieiconen div{ flex:1; padding:0 clamp(12px,2vw,26px); text-align:left;
  border-right:1px solid rgba(201,169,110,.28); }
.drieiconen div:first-child{ padding-left:0; }
.drieiconen div:last-child{ border-right:0; }
.drieiconen span{ display:block; font-size:24px; color:var(--goudlicht); line-height:1; }
.drieiconen b{ display:block; margin-top:12px; font-family:'Inter',system-ui,sans-serif; font-weight:400;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,240,231,.85); }
.drieiconen small{ display:block; margin-top:4px; font-family:'Cormorant Garamond',serif;
  font-size:14px; color:var(--ink3); }
@media (max-width:560px){ .drieiconen{ flex-direction:column; gap:18px; }
  .drieiconen div{ border-right:0; padding:0; } }

/* uitklapkaarten */
.uitklappen{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
@media (max-width:820px){ .uitklappen{ grid-template-columns:1fr; } }
.uitk{ border:1px solid rgba(201,169,110,.3); background:rgba(255,255,255,.03); }
.uitk.open{ border-color:rgba(201,169,110,.7); }
.uitkop{ width:100%; background:none; border:0; padding:0; cursor:pointer; text-align:left;
  color:inherit; font-family:inherit; display:block; position:relative; }
.uitkop img{ width:100%; height:110px; object-fit:cover; display:block; }
.uitkop span{ display:block; padding:14px 40px 15px 16px; }
.uitkop b{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:18px; color:#F6F0E7; }
.uitkop em{ display:block; font-style:normal; font-size:13px; color:var(--ink3); margin-top:5px;
  line-height:1.5; }
.uitkop i{ position:absolute; right:14px; bottom:16px; width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(201,169,110,.5); display:grid; place-items:center; font-style:normal;
  font-size:11px; color:var(--goudlicht); transition:transform .2s; }
.uitk.open .uitkop i{ transform:rotate(90deg); }
.uitlijf{ display:none; padding:0 16px 18px; font-family:'Cormorant Garamond',serif;
  font-size:16px; line-height:1.6; color:rgba(246,240,231,.86); }
.uitk.open .uitlijf{ display:block; animation:in .3s ease; }

/* voorbeeldkaart zwevend over het achtergrondbeeld */
.okruimel .zweef{ position:absolute; top:clamp(70px,12vh,150px); right:clamp(20px,3vw,52px);
  width:min(40%,430px); max-width:none; text-align:center; pointer-events:none; }
.zweef img{ width:100%; display:block; mix-blend-mode:screen;
  filter:drop-shadow(0 0 40px rgba(0,0,0,.55)); }
.zweef span{ display:block; margin-top:10px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:15px; color:var(--goudlicht); }
@media (max-width:1000px){
  .okruimel .zweef{ position:static; width:100%; margin:22px 0 6px; }
}

/* planetenraster */
.plraster{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:18px; }
@media (max-width:1100px){ .plraster{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:700px){ .plraster{ grid-template-columns:repeat(2,1fr); } }
.plkaart{ position:relative; border:1px solid rgba(201,169,110,.28); background:rgba(255,255,255,.03);
  padding:0 0 12px; cursor:pointer; color:inherit; font-family:inherit; text-align:left;
  transition:border-color .2s, transform .2s; }
.plkaart:hover{ border-color:rgba(201,169,110,.7); transform:translateY(-2px); }
.plkaart.aan{ border-color:var(--goudlicht); box-shadow:0 0 24px rgba(201,169,110,.2); }
.plkaart img{ width:100%; height:104px; object-fit:cover; display:block; }
.plsym{ display:block; text-align:left; padding:10px 12px 0; font-size:19px; color:var(--goudlicht);
  line-height:1; }
.plnaam{ display:block; padding:6px 12px 0; }
.plnaam i{ font-style:normal; font-family:'Cormorant Garamond',serif; font-size:15px;
  color:var(--goud); margin-right:8px; }
.plnaam b{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:17px; color:#F6F0E7; }
.plnaam em{ display:block; font-style:normal; font-size:12.5px; color:var(--ink3);
  margin-top:5px; line-height:1.45; }

/* detail van één planeet */
.pldetail:empty{ display:none; }
.plvlak{ position:relative; margin-top:22px; padding:clamp(24px,3vw,40px);
  border:1px solid rgba(201,169,110,.45); animation:in .4s ease;
  background:linear-gradient(100deg, rgba(8,6,4,.96) 0%, rgba(8,6,4,.9) 46%, rgba(8,6,4,.45) 72%,
    rgba(8,6,4,.12) 100%), var(--plbeeld) right center / cover no-repeat, #0D0A07; }
.plkop{ display:flex; align-items:center; gap:18px; }
.plteken{ font-size:34px; color:var(--goudlicht); line-height:1; }
.plteken.klein{ font-size:26px; }
.plkop h3, .plkop h2{ font-family:'Cormorant Garamond',serif; font-weight:300; margin:0;
  font-size:clamp(26px,3.6vw,40px); letter-spacing:.06em; color:#FBF6EC; }
.plsub{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--goudlicht);
  font-size:clamp(17px,2vw,22px); margin-top:8px; }
.pltekst{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,1.2vw,18px);
  line-height:1.6; color:rgba(246,240,231,.88); margin-top:14px; max-width:520px; }
.plvak{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,3vw,40px); margin-top:26px;
  border:1px solid rgba(201,169,110,.35); background:rgba(8,6,4,.72); padding:clamp(18px,2.4vw,28px); }
@media (max-width:820px){ .plvak{ grid-template-columns:1fr; } }
.plvaka b{ display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  font-size:clamp(17px,1.9vw,21px); color:#FBF6EC; margin:10px 0 8px; }
.plvaka p{ font-family:'Cormorant Garamond',serif; font-size:16px; line-height:1.6;
  color:rgba(246,240,231,.86); }
.plvakb{ border-left:1px solid rgba(201,169,110,.3); padding-left:clamp(16px,2vw,26px); }
@media (max-width:820px){ .plvakb{ border-left:0; padding-left:0; } }
.plbl{ display:block; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,206,152,.85); margin-bottom:12px; }
.plvakb ul{ list-style:none; margin:0; padding:0; }
.plvakb li{ display:flex; align-items:center; gap:10px; padding:7px 0;
  font-family:'Cormorant Garamond',serif; font-size:16px; color:rgba(246,240,231,.9); }
.plvakb li::before{ content:"\25CB"; color:var(--goudlicht); font-size:13px; }
.plonder{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(20px,3vw,36px); margin-top:6px; }
@media (max-width:820px){ .plonder{ grid-template-columns:1fr; } }
ul.lijst.vink li i{ border-color:rgba(201,169,110,.6); font-size:10px; }
.plherinnering{ align-self:center; text-align:center; border:1px solid rgba(201,169,110,.5);
  background:linear-gradient(120deg, rgba(58,42,18,.6), rgba(28,20,10,.45));
  padding:24px 22px; }
.plankh{ display:block; font-size:26px; color:var(--goudlicht); margin-bottom:10px; }
.plherinnering em{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(17px,1.8vw,21px); color:#FBF3E0; }
.plvlak .invoer{ margin-top:6px; }
.plvlak .knoppen{ justify-content:space-between; }
.plvlak .knop{ flex:0 0 auto; min-width:0; border-radius:999px; padding:14px 26px; }

/* planeetsymbolen als tekst, nooit als emoji */
.plteken, .plsym, .drieiconen span, .ticonen span, .hsymbool, .plankh{
  font-family:'Inter','Segoe UI Symbol','DejaVu Sans',serif;
  font-variant-emoji:text; }

/* detailvlak van een planeet, opbouw als het ontwerp */
.plvlak{ padding-top:clamp(20px,2.4vw,30px); }
.plterug{ background:none; border:0; padding:0 0 4px; margin-bottom:20px; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,240,231,.75); border-bottom:1px solid rgba(201,169,110,.5); }
.plterug:hover{ color:var(--goudlicht); }
.plkop{ gap:20px; }
.plsub{ margin-top:10px; }
.pltekst{ max-width:440px; }
.plvak{ margin-top:clamp(120px,22vh,220px); }
@media (max-width:1000px){ .plvak{ margin-top:26px; } }
.plnav{ align-items:center; }
.plmidden{ flex:1; text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(15px,1.5vw,18px); color:var(--goudlicht); }
@media (max-width:700px){ .plmidden{ order:3; flex-basis:100%; margin-top:12px; } }
.plvlak{ background:linear-gradient(100deg, rgba(8,6,4,.96) 0%, rgba(8,6,4,.9) 40%,
    rgba(8,6,4,.55) 62%, rgba(8,6,4,.15) 84%, rgba(8,6,4,0) 100%),
  var(--plbeeld) right top / cover no-repeat, #0D0A07; }
@media (max-width:1000px){
  .plvlak{ background:linear-gradient(180deg, rgba(8,6,4,.86) 0%, rgba(8,6,4,.9) 45%,
      rgba(8,6,4,.94) 100%), var(--plbeeld) center top / cover no-repeat, #0D0A07; }
}
/* kaartjes in het raster met beeld boven de tekst */
.plkaart img{ height:132px; }

/* planetenblok mag de volle breedte van het paneel gebruiken */
.okruimel > .plraster,
.okruimel > .pldetail,
.okruimel > .uitklappen{ max-width:none; }
.okruimel > .okop{ max-width:none; }

/* compacter detailvlak */
.plvlak{ padding:clamp(20px,2.2vw,30px); }
.plterug{ margin-bottom:14px; }
.plkop h3, .plkop h2{ font-size:clamp(23px,2.8vw,32px); }
.plteken{ font-size:28px; }
.plsub{ font-size:clamp(16px,1.6vw,19px); margin-top:6px; }
.pltekst{ font-size:16px; margin-top:10px; max-width:400px; }
.plvak{ margin-top:clamp(40px,10vh,120px); padding:clamp(16px,1.8vw,22px); gap:clamp(16px,2vw,28px); }
.plvaka b{ font-size:17px; margin:6px 0 6px; }
.plvaka p{ font-size:15px; }
.plvakb li{ font-size:15px; padding:5px 0; }
.plbl{ margin-bottom:9px; }
.plonder{ margin-top:18px; gap:clamp(16px,2.4vw,28px); }
.plvlak .lkop{ margin:20px 0 10px; font-size:clamp(17px,1.8vw,20px); }
.plvlak ul.lijst li{ padding:8px 0; font-size:15.5px; }
.plherinnering{ padding:18px 16px; }
.plherinnering em{ font-size:17px; }
.plvlak .invoer textarea{ padding:12px 40px 12px 14px; font-size:16px; }
.plvlak .knoppen{ margin-top:20px; }
.plvlak .knop{ padding:12px 22px; font-size:10.5px; }

/* maanfases */
.maanvak{ border:1px solid rgba(201,169,110,.4); background:rgba(8,6,4,.78);
  padding:clamp(18px,2.2vw,26px); margin-top:clamp(40px,10vh,120px); max-width:none; }
.maankop{ font-family:'Cormorant Garamond',serif; font-size:clamp(19px,2.2vw,24px);
  color:#FBF6EC; margin-bottom:16px; }
.maanrij2{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
@media (max-width:820px){ .maanrij2{ grid-template-columns:repeat(4,1fr); } }
.maanfase{ text-align:center; padding:10px 4px 8px; border:1px solid transparent; position:relative; }
.maanfase svg{ width:56px; height:56px; }
.maanfase span{ display:block; margin-top:8px; font-size:11px; letter-spacing:.04em;
  color:var(--ink3); line-height:1.35; }
.maanfase.aan{ border-color:var(--goudlicht); box-shadow:0 0 22px rgba(201,169,110,.22); }
.maanfase.aan span{ color:#FBF3E0; }
.maanfase.aan::after{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:7px solid var(--goudlicht); }
.vakblok{ margin-top:14px; }
.vakblok .plvaka{ display:flex; gap:18px; align-items:flex-start; }
.vakbeeld{ flex:0 0 84px; width:84px; height:84px; object-fit:cover; border-radius:50%;
  border:1px solid rgba(201,169,110,.4); }
.okruimel > .maanvak, .okruimel > .vakblok, .okruimel > .plonder{ max-width:none; }

.maanfase img{ width:66px; height:66px; border-radius:50%; object-fit:cover; display:block;
  margin:0 auto; }
.maanfase.aan img{ box-shadow:0 0 26px rgba(232,206,152,.45); }
@media (max-width:820px){ .maanfase img{ width:56px; height:56px; } }

/* citaat binnen een stap */
.okruimel > .afsluiter{ max-width:600px; text-align:left; margin:22px 0 26px;
  border-left:1px solid rgba(201,169,110,.5); padding-left:20px; }
.okruimel > .afsluiter em{ font-size:clamp(18px,1.9vw,23px); line-height:1.45; }

/* afsluiting van een fase */
.faseslot{ margin-top:clamp(30px,4vw,48px); padding-top:clamp(22px,3vw,32px);
  border-top:1px solid rgba(201,169,110,.3); max-width:760px; }
.faseslot p{ font-family:'Cormorant Garamond',serif; font-size:clamp(17px,1.8vw,21px);
  line-height:1.6; color:rgba(246,240,231,.9); }

/* hero: tekst dichter op elkaar en netter afgebroken */
.hero .htekst{ max-width:600px; }
.hero h1{ margin-bottom:0; }
.hlijn{ margin:14px 0 16px; }
.hero .hsub{ margin-top:0; }
.hvraag{ margin-top:2px; }
.hintro{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,1.35vw,19px);
  line-height:1.55; margin-top:16px; max-width:480px; color:rgba(246,240,231,.82); }
.groot{ margin:clamp(22px,3vw,34px) 0 clamp(6px,1vw,12px); }

/* drie lagen */
.lagenkop{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--goudlicht);
  margin:clamp(24px,3vw,36px) 0 14px; }
.lagen{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }
@media (max-width:900px){ .lagen{ grid-template-columns:1fr; } }
.laagkaart{ border:1px solid rgba(201,169,110,.3); background:rgba(255,255,255,.03); }
.laagkaart img{ width:100%; height:132px; object-fit:cover; display:block; }
.laagtekst{ display:flex; align-items:center; gap:12px; padding:12px 14px 14px; }
.laagtekst b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:#F6F0E7; }
.laagtekst em{ display:block; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:15px; color:var(--goudlicht); margin-top:4px; }
.laagtekst .opijl{ margin-left:auto; }
.laag3 p{ font-family:'Cormorant Garamond',serif; font-size:15.5px; line-height:1.55;
  color:var(--ink3); margin-top:12px; }

/* blauwdrukvlak */
.bdvlak{ position:relative; margin-top:clamp(26px,3.4vw,44px); overflow:hidden;
  border:1px solid rgba(201,169,110,.35); padding:clamp(24px,3vw,40px); min-height:420px;
  background:linear-gradient(100deg, rgba(8,6,4,.97) 0%, rgba(8,6,4,.9) 38%, rgba(8,6,4,.45) 62%,
    rgba(8,6,4,.1) 88%, rgba(8,6,4,0) 100%), var(--bdbeeld) right center / cover no-repeat, #0D0A07; }
.bdtekst{ position:relative; max-width:52%; }
@media (max-width:900px){ .bdtekst{ max-width:none; }
  .bdvlak{ background:linear-gradient(180deg, rgba(8,6,4,.94), rgba(8,6,4,.9) 60%, rgba(8,6,4,.6)),
    var(--bdbeeld) center bottom / cover no-repeat, #0D0A07; } }
.bdvlak h3, .bdvlak h2{ font-family:'Cormorant Garamond',serif; font-weight:300; margin:4px 0 12px;
  font-size:clamp(26px,3.2vw,36px); color:#FBF6EC; }
.bdvlak p{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,1.3vw,18px);
  line-height:1.6; color:rgba(246,240,231,.88); }
.bdlijst{ list-style:none; margin:20px 0 0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:10px 18px; }
@media (max-width:600px){ .bdlijst{ grid-template-columns:1fr; } }
.bdlijst li{ display:flex; align-items:center; gap:11px; font-family:'Cormorant Garamond',serif;
  font-size:16px; color:rgba(246,240,231,.9); }
.bdlijst i{ flex:0 0 22px; height:22px; border-radius:50%; border:1px solid rgba(201,169,110,.55);
  display:grid; place-items:center; font-style:normal; font-size:10px; color:var(--goudlicht); }
.bdnoot{ position:absolute; right:clamp(20px,3vw,40px); bottom:clamp(20px,3vw,40px);
  max-width:230px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:16px; line-height:1.5; color:var(--goudlicht);
  border-bottom:1px solid rgba(201,169,110,.5); padding-bottom:14px; }
@media (max-width:900px){ .bdnoot{ position:static; max-width:none; margin-top:22px; } }

/* slotbalk */
.slotbalk{ display:grid; grid-template-columns:260px 1fr auto; align-items:center; gap:clamp(18px,3vw,40px);
  margin-top:clamp(20px,3vw,32px); border:1px solid rgba(201,169,110,.3);
  background:rgba(255,255,255,.03); overflow:hidden; }
@media (max-width:900px){ .slotbalk{ grid-template-columns:1fr; } }
.slotbalk img{ width:100%; height:150px; object-fit:cover; display:block; }
.slottekst{ padding:18px 0; }
@media (max-width:900px){ .slottekst{ padding:0 18px; } }
.slottekst h3, .slottekst h2{ font-family:'Cormorant Garamond',serif; font-weight:300; margin:0 0 10px;
  font-size:clamp(21px,2.4vw,28px); color:#FBF6EC; }
.slottekst p{ font-family:'Cormorant Garamond',serif; font-size:16px; line-height:1.6;
  color:rgba(246,240,231,.85); }
.slotknop{ background:none; border:0; cursor:pointer; padding:22px clamp(20px,3vw,36px);
  border-left:1px solid rgba(201,169,110,.3); text-align:center; color:inherit; }
@media (max-width:900px){ .slotknop{ border-left:0; border-top:1px solid rgba(201,169,110,.3);
  width:100%; } }
.slotknop span{ display:grid; place-items:center; width:40px; height:40px; margin:0 auto 10px;
  border-radius:50%; border:1px solid rgba(201,169,110,.55); color:var(--goudlicht); font-size:16px; }
.slotknop small{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,240,231,.8); }

/* iconenrij met vijf items, en het zwevende teken op fase 2 */
.drieiconen{ flex-wrap:wrap; }
.drieiconen div{ min-width:120px; }
#helderheid .zweef{ top:clamp(50px,8vh,110px); width:min(42%,440px); }
#helderheid .zweef img{ mix-blend-mode:screen; }

/* beeld binnen een paneel over de volle breedte */
.okruimel > figure{ max-width:none; margin-left:calc(-1 * clamp(20px,2.2vw,30px));
  margin-right:calc(-1 * clamp(20px,2.2vw,30px)); }
.okruimel > figure figcaption{ background:linear-gradient(180deg,rgba(8,6,4,.1),rgba(8,6,4,.55)); }

/* het drieluik klein, rechtsboven in het paneel */
#helderheid .zweef{ top:clamp(24px,3vw,44px); right:clamp(20px,2.6vw,36px);
  width:min(34%,360px); }
#helderheid .zweef img{ mix-blend-mode:normal; border:1px solid rgba(201,169,110,.35);
  box-shadow:0 14px 44px rgba(0,0,0,.55); }
#helderheid .zweef span{ font-size:13.5px; }
@media (max-width:1000px){ #helderheid .zweef{ width:100%; } }

/* fase 3: keuzekaarten naast elkaar */
#integratie .keuze{ margin-bottom:0; }
#integratie .keuzerij{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
#integratie .afsluiter{ text-align:center; border-left:0; padding-left:0; max-width:none; }

.keuzerij{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .keuzerij{ grid-template-columns:1fr; } }
.keuzerij .keuze{ margin-bottom:0; height:100%; }
.okruimel > .keuzerij{ max-width:none; }

/* ══ fase 3 in het licht ═══════════════════════════════════ */
#integratie{ background:#FAF6EF; color:#241C16;
  margin:0 calc(-1 * clamp(22px,5vw,70px));
  padding:0 clamp(22px,5vw,70px) clamp(30px,4vw,50px); }
#integratie .hero{ margin-left:calc(-1 * clamp(22px,5vw,70px));
  margin-right:calc(-1 * clamp(22px,5vw,70px)); }
#integratie .hero .hwaas{ background:linear-gradient(100deg,
  rgba(250,246,239,.97) 0%, rgba(250,246,239,.9) 34%, rgba(250,246,239,.35) 62%,
  rgba(250,246,239,0) 88%); }
#integratie .hlabel{ color:var(--goudprint); }
#integratie .hero h1{ color:#1A1410; }
#integratie .hlijn{ background:rgba(154,123,46,.6); }
#integratie .hero .hsub{ color:#3A2E22; }
#integratie .hvraag{ color:var(--goudprint); }
#integratie .hintro{ color:#4A3B2C; }

#integratie .maanvak{ background:none; border:0; padding:0; margin-top:clamp(26px,4vw,44px); }
#integratie .maankop{ color:#1A1410; }
#integratie .maanfase span{ color:#6B5B4A; }
#integratie .maanfase img{ box-shadow:0 6px 18px rgba(26,20,16,.18); }

#integratie .t, #integratie .blokje .t{ color:#3A2E22; }
#integratie .laag, #integratie .lagenkop{ color:var(--goudprint);
  border-bottom-color:rgba(154,123,46,.35); }

#integratie .keuze{ background:#FFFDFA; border-color:rgba(154,123,46,.35); text-align:center;
  padding:30px 24px 26px; position:relative; }
#integratie .keuzerij{ counter-reset:kz; margin-top:16px; }
#integratie .keuze::before{ counter-increment:kz; content:counter(kz);
  position:absolute; top:20px; left:22px; width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(154,123,46,.55); display:grid; place-items:center;
  font-family:'Cormorant Garamond',serif; font-size:14px; color:var(--goudprint); }
#integratie .keuze b{ font-size:24px; color:#1A1410; }
#integratie .keuze span{ color:#4A3B2C; font-family:'Cormorant Garamond',serif; font-size:17px; }
#integratie .keuze i{ color:var(--goudprint); }

#integratie .bdvlak{ border-color:rgba(154,123,46,.35);
  background:linear-gradient(100deg, rgba(250,246,239,.97) 0%, rgba(250,246,239,.92) 34%,
    rgba(250,246,239,.4) 64%, rgba(250,246,239,0) 92%), var(--bdbeeld) right center / cover no-repeat, #FAF6EF; }
#integratie .bdvlak h3, #integratie .bdvlak h2, #integratie .plbl{ color:#1A1410; }
#integratie .plbl{ color:var(--goudprint); }
#integratie .bdvlak p{ color:#3A2E22; }
#integratie .bdlijst li{ color:#241C16; }
#integratie .bdlijst i{ border-color:rgba(154,123,46,.5); color:var(--goudprint); }
#integratie .bdnoot{ color:var(--goudprint); border-bottom-color:rgba(154,123,46,.4); }
#integratie .knop{ background:#866B28; color:#FFF8EC; border-color:#9A7B2E; }
#integratie .knop.licht{ background:none; color:#6E5518; border-color:rgba(154,123,46,.5); }

#integratie .afsluiter{ text-align:center; border-left:0; padding-left:0; max-width:none;
  margin:clamp(30px,4vw,46px) 0; }
#integratie .afsluiter em{ color:#6E5518; }
#integratie .afsluiter small{ color:#7A6C5A; letter-spacing:.3em; }

#integratie .slotbalk{ background:#FFFDFA; border-color:rgba(154,123,46,.35); }
#integratie .slottekst h3, #integratie .slottekst h2{ color:#1A1410; }
#integratie .slottekst p{ color:#3A2E22; }
#integratie .slotknop{ border-left-color:rgba(154,123,46,.3); }
#integratie .slotknop span{ border-color:rgba(154,123,46,.5); color:var(--goudprint); }
#integratie .slotknop small{ color:#6B5B4A; }
#integratie footer{ border-top-color:rgba(154,123,46,.35); color:#6B5B4A; }
#integratie footer em{ color:var(--goudprint); }
#integratie .duur{ color:var(--goudprint); border-color:rgba(154,123,46,.4); }

/* fase 3: hero in twee kolommen, beeld rechts */
#integratie .hero{ display:grid; grid-template-columns:1fr 1.15fr; align-items:stretch;
  min-height:0; margin-bottom:0; }
#integratie .hero img{ position:static; height:100%; min-height:clamp(260px,40vh,420px); }
#integratie .hero .hwaas{ display:none; }
#integratie .hero .htekst{ padding:clamp(26px,3.4vw,48px) clamp(20px,2.6vw,40px)
  clamp(26px,3.4vw,48px) clamp(22px,5vw,70px); max-width:none; align-self:center; }
@media (max-width:900px){ #integratie .hero{ grid-template-columns:1fr; }
  #integratie .hero img{ min-height:220px; } }

/* maanstrook smal en licht */
#integratie .maanvak{ margin-top:clamp(24px,3vw,40px); }
#integratie .maankop{ font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--goudprint); margin-bottom:14px; }
#integratie .maanrij2{ display:flex; gap:clamp(10px,2vw,26px); align-items:center; }
#integratie .maanfase{ padding:0; flex:0 0 auto; }
#integratie .maanfase img{ width:34px; height:34px; }
#integratie .maanfase span{ font-size:9px; letter-spacing:.1em; color:#7A6C5A; margin-top:6px; }

/* drie kaarten met pijl rechtsonder */
#integratie .keuze{ padding-bottom:56px; }
#integratie .keuze i{ position:absolute; left:24px; bottom:22px; }
#integratie .keuze::after{ content:"\2192"; position:absolute; right:22px; bottom:18px;
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(154,123,46,.5);
  display:grid; place-items:center; color:var(--goudprint); font-size:14px; }

/* blauwdruk in drie kolommen */
.bd3{ display:grid; grid-template-columns:1fr 1fr .7fr; gap:0; align-items:stretch;
  border:1px solid rgba(154,123,46,.35); background:#FFFDFA;
  margin-top:clamp(24px,3vw,40px); overflow:hidden; }
@media (max-width:1000px){ .bd3{ grid-template-columns:1fr; } }
.bd3tekst{ padding:clamp(24px,3vw,40px); }
.bd3tekst h3, .bd3tekst h2{ font-family:'Cormorant Garamond',serif; font-weight:300; margin:6px 0 14px;
  font-size:clamp(24px,2.8vw,32px); color:#1A1410; line-height:1.2; }
.bd3tekst p{ font-family:'Cormorant Garamond',serif; font-size:17px; line-height:1.6; color:#3A2E22; }
.bd3beeld img{ width:100%; height:100%; object-fit:cover; display:block; min-height:260px; }
.bd3rechts{ padding:clamp(24px,3vw,40px); border-left:1px solid rgba(154,123,46,.28); }
@media (max-width:1000px){ .bd3rechts{ border-left:0; border-top:1px solid rgba(154,123,46,.28); } }
.bd3rechts ul{ list-style:none; margin:0; padding:0; }
.bd3rechts li{ display:flex; align-items:center; gap:12px; padding:7px 0;
  font-family:'Cormorant Garamond',serif; font-size:17px; color:#241C16; }
.bd3rechts li::before{ content:"\25CB"; color:var(--goudprint); font-size:12px; }
.bd3noot{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(154,123,46,.35);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:var(--goudprint); }
#integratie .bd3 .knop{ margin-top:22px; border-radius:0; }

/* fase 3: tekst links, beeld rechts, zacht in elkaar overlopend */
#integratie .hero{ grid-template-columns:1fr 1.2fr; }
#integratie .hero .htekst{ order:-1; padding-right:0; }
#integratie .hero img{ margin-left:-14%; width:114%;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 10%,
    rgba(0,0,0,.85) 22%, #000 34%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 10%,
    rgba(0,0,0,.85) 22%, #000 34%); }
@media (max-width:900px){
  #integratie .hero img{ margin-left:0; width:100%;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%); }
}

/* ══════════════════════════════════════════════════════════
   MOBIEL
   ══════════════════════════════════════════════════════════ */
html, body{ overflow-x:hidden; }
img, svg{ max-width:100%; }

@media (max-width:820px){
  /* kop en fasebalk blijven bereikbaar */
  .zijbalk{ position:sticky; top:0; z-index:9; background:#0D0A07; }
  .zmerk b{ letter-spacing:.2em; }
  .fase{ gap:2px; }
  .fase button{ padding:4px 2px; min-width:44px; }
  .fase button i{ flex:0 0 26px; height:26px; font-size:11px; }
  .fase button small{ font-size:8.5px; letter-spacing:.06em; }

  .wrap{ padding:0 16px 40px; }
  .hero{ margin:0 -16px 22px; min-height:0; }
  .hero .htekst{ padding:26px 16px 30px; }
  .hero h1{ font-size:clamp(30px,9vw,42px); }
  .groot{ font-size:19px; }

  /* alles wat naast elkaar stond, onder elkaar */
  .okaarten, .okaarten.strip{ grid-template-columns:1fr 1fr; gap:10px; }
  .okaarten .okaart img, .okaarten.strip .okaart img{ height:92px; }
  .okaart .otekst{ padding:10px 11px 13px; }
  .okaart .okop2 b{ font-size:15px; }
  .okaart .okrt{ font-size:12px; }

  .okruimel{ padding:20px 16px 26px; margin-left:-16px; margin-right:-16px;
    border-left:0; border-right:0; }
  .okruim{ flex-wrap:wrap; gap:10px; }
  .osluit{ margin-left:0; }
  .okop3 h2{ font-size:26px; }

  figure{ margin:22px -16px; }
  .stil{ margin:26px -16px; padding:26px 20px; }

  /* knoppen op volle breedte en groot genoeg om te raken */
  .knoppen{ gap:8px; }
  .knop{ min-width:0; width:100%; padding:15px 16px; }
  .plvlak .knop, .okruimel .knop{ width:100%; }
  .plmidden{ order:3; flex-basis:100%; margin:10px 0 0; }

  /* invoervelden: 16px voorkomt inzoomen op iOS */
  .invoer textarea, .okruimel .invoer textarea, .plvlak .invoer textarea{ font-size:16px; }

  /* planeten */
  .plraster{ grid-template-columns:1fr 1fr; gap:10px; }
  .plkaart img{ height:96px; }
  .plvlak{ padding:20px 16px 26px; }
  .plkop{ gap:12px; }
.plkop h3, .plkop h2{ font-size:24px; }
  .plteken{ font-size:24px; }

  /* negenjaarsritme: horizontaal schuiven in plaats van persen */
  .ritme{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .ritme .kopjes, .ritme .ritmerij{ min-width:620px; }

  /* maanfases: schuivende rij */
  .maanrij2{ display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px; }
  .maanfase{ flex:0 0 76px; }

  /* fase 2 en 3 */
  .lagen{ grid-template-columns:1fr; }
  .bdvlak{ padding:22px 16px; min-height:0; }
  .bdlijst{ grid-template-columns:1fr; }
  .slotbalk img{ height:130px; }
  .keuzerij{ grid-template-columns:1fr; }

  #integratie{ margin:0 -16px; padding:0 16px 34px; }
  #integratie .hero .htekst{ padding:24px 16px 26px; }
  #integratie .keuze{ padding:26px 20px 54px; }
  .bd3tekst, .bd3rechts{ padding:22px 16px; }
  .bd3beeld img{ min-height:200px; }
}

@media (max-width:480px){
  .okaarten, .okaarten.strip, .plraster{ grid-template-columns:1fr; }
  .okaarten .okaart img, .plkaart img{ height:130px; }
  .drieiconen{ flex-direction:column; gap:16px; }
  .drieiconen div{ border-right:0; padding:0; }
  .lkop{ gap:10px; }
  .lkop span{ max-width:60px; }
  .dbinnen h1{ font-size:34px; }
  .dvideo{ max-height:30vh; }
}

.naar-start{ background:none; border:0; cursor:pointer; font-family:'Inter',system-ui,sans-serif;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3);
  padding:0; margin-top:10px; text-align:left; }
.naar-start:hover{ color:var(--goudlicht); }
@media (max-width:820px){ .naar-start{ display:none; } }

/* uitleg onder de kaarten, één kolom */
#herkenning .tweeluik{ grid-template-columns:1fr; max-width:760px;
  border-bottom:0; border-top:1px solid rgba(201,169,110,.3);
  margin-top:clamp(26px,4vw,44px); padding-bottom:0; }
#herkenning .okop{ margin-top:clamp(18px,2.4vw,28px); }

/* ══ fase 3: drie wegen ══════════════════════════════════ */
.wegkop{ display:flex; align-items:center; gap:18px; margin:clamp(28px,4vw,46px) 0 18px; }
.wegkop h3, .wegkop h2{ font-family:'Cormorant Garamond',serif; font-weight:300; margin:0;
  font-size:clamp(24px,3vw,34px); color:#1A1410; white-space:nowrap; }
.wegkop span{ flex:1; height:1px; background:rgba(154,123,46,.4); }
.wegkop em{ font-style:normal; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--goudprint); white-space:nowrap; }
.wegen{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
@media (max-width:1000px){ .wegen{ grid-template-columns:1fr; } }
.weg{ background:#FFFDFA; border:1px solid rgba(154,123,46,.3); display:flex; flex-direction:column; }
.weg img{ width:100%; height:auto; aspect-ratio:686/453; object-fit:cover; display:block; }
.weglijf{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.wegnr{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--goudprint); }
.weglijf b{ display:block; margin-top:6px; font-family:'Inter',system-ui,sans-serif; font-weight:400;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#1A1410; }
.weglijf em{ display:block; margin-top:6px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:18px; color:var(--goudprint); }
.weglijf p{ margin-top:12px; font-family:'Cormorant Garamond',serif; font-size:16px;
  line-height:1.55; color:#3A2E22; }
.weglijf ul{ list-style:none; margin:14px 0 18px; padding:0; }
.weglijf li{ display:flex; align-items:center; gap:10px; padding:4px 0;
  font-family:'Cormorant Garamond',serif; font-size:16px; color:#241C16; }
.weglijf li i{ flex:0 0 20px; height:20px; border-radius:50%; border:1px solid rgba(154,123,46,.5);
  display:grid; place-items:center; font-style:normal; font-size:10px; color:var(--goudprint); }
.weglijf .knop{ flex:0 0 auto; margin-top:auto; width:100%; background:#866B28; color:#FFF8EC;
  border-color:#9A7B2E; border-radius:0; }
.weg .uitk{ border:0; border-top:1px solid rgba(154,123,46,.3); margin-top:16px; background:none; }
.wrem{ margin:0 0 14px; padding-top:14px; border-top:1px solid rgba(154,123,46,.3);
  display:flex; flex-direction:column; gap:10px; font-family:'Cormorant Garamond',serif; font-size:16px; color:#241C16; }
.wremrij{ display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:13px; line-height:1.45; }
.wremrij input{ flex:0 0 auto; accent-color:#866B28; width:16px; height:16px; margin:3px 0 0; }
.wremkeus{ display:flex; flex-direction:column; gap:8px; padding-left:26px; }
.wremkeus[hidden], .wremnr[hidden]{ display:none; }
.wremnr{ font:inherit; font-size:15px; padding:9px 12px; border:1px solid rgba(154,123,46,.45);
  background:#FFFDFA; color:#241C16; border-radius:0; }
.wrem .knop{ flex:none; min-width:0; padding:10px 16px; align-self:stretch; margin-top:0; width:100%; }
.wremstatus{ font-size:15px; color:var(--goudprint); min-height:1em; }
.weg .uitkop span{ padding:12px 34px 12px 0; }
.weg .uitkop b{ font-family:'Cormorant Garamond',serif; font-size:16px; letter-spacing:0;
  text-transform:none; color:#6E5518; }
.weg .uitkop i{ bottom:auto; top:12px; border-color:rgba(154,123,46,.5); color:var(--goudprint);
  transform:rotate(90deg); }
.weg .uitk.open .uitkop i{ transform:rotate(270deg); }
.weg .uitlijf{ padding:0 0 14px; color:#3A2E22; font-size:15.5px; }

/* van inzicht naar handelen */
.stroom{ display:grid; grid-template-columns:1fr auto; gap:clamp(20px,3vw,44px);
  align-items:center; }
@media (max-width:900px){ .stroom{ grid-template-columns:1fr; } }
.stroomrij{ display:flex; align-items:flex-start; gap:clamp(6px,1.4vw,16px); flex-wrap:wrap; }
.stap5{ text-align:center; flex:1; min-width:92px; }
.cirkel{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 12px;
  border-radius:50%; border:1px solid rgba(154,123,46,.5); color:var(--goudprint); font-size:20px; }
.stap5 b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:#1A1410; line-height:1.5; }
.stap5 small{ display:block; margin-top:6px; font-family:'Cormorant Garamond',serif;
  font-size:15px; color:#6B5B4A; }
.pijl{ align-self:center; margin-top:-24px; color:var(--goudprint); font-size:16px; }
.stroomnoot{ border-left:1px solid rgba(154,123,46,.45); padding-left:clamp(16px,2vw,28px);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(17px,1.9vw,22px); line-height:1.5; color:var(--goudprint); }
@media (max-width:900px){ .stroomnoot{ border-left:0; border-top:1px solid rgba(154,123,46,.45);
  padding:16px 0 0; } }

/* startbalk onderaan */
.startbalk{ display:grid; grid-template-columns:340px 1fr; gap:0; align-items:stretch;
  margin-top:clamp(26px,3.4vw,44px); border:1px solid rgba(154,123,46,.3); background:#FFFDFA;
  overflow:hidden; }
@media (max-width:900px){ .startbalk{ grid-template-columns:1fr; } }
.startbalk img{ width:100%; height:100%; min-height:190px; object-fit:cover; display:block; }
.startlijf{ padding:clamp(22px,2.6vw,34px); }
.startlijf h3, .startlijf h2{ font-family:'Cormorant Garamond',serif; font-weight:300; margin:0 0 18px;
  font-size:clamp(22px,2.4vw,28px); color:#1A1410; }
.startrij{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,22px); }
@media (max-width:700px){ .startrij{ grid-template-columns:1fr; } }
.startvak .cirkel{ width:40px; height:40px; margin:0 0 10px; font-size:16px; }
.startvak b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:17px; color:#1A1410; }
.startvak small{ display:block; margin:4px 0 12px; font-family:'Cormorant Garamond',serif;
  font-size:15px; color:#6B5B4A; }
.startvak .knop{ width:100%; background:#866B28; color:#FFF8EC; border-color:#9A7B2E;
  border-radius:0; padding:12px 10px; font-size:10px; }
#integratie .wegkop h3, #integratie .wegkop h2, #integratie .startlijf h3, #integratie .startlijf h2{ color:#1A1410; }

.wegnr{ display:flex; align-items:baseline; gap:10px; }
.wanneer{ font-style:normal; font-family:'Inter',system-ui,sans-serif; font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--goudprint);
  border:1px solid rgba(154,123,46,.4); padding:3px 8px; }

/* mobiel: route en startknop altijd zichtbaar */
@media (max-width:820px){
  .zijbalk{ flex-wrap:wrap; row-gap:10px; padding:10px 14px 12px; }
  .zmerk{ order:1; }
  .naar-start{ display:block; order:2; margin:0 0 0 auto; padding:7px 12px;
    border:1px solid rgba(201,169,110,.4); color:var(--goudlicht); font-size:9px; }
  .zijbalk .terugd#naar-dashboard{ order:3; margin:0 0 0 10px; padding:7px 12px;
    border:1px solid rgba(201,169,110,.25); font-size:9px; }
  .fase{ order:4; flex-basis:100%; gap:6px; border-top:1px solid rgba(201,169,110,.2);
    padding-top:10px; }
  .fase button{ flex:1; flex-direction:row; align-items:center; gap:8px; padding:4px 6px;
    justify-content:flex-start; }
  .fase button i{ flex:0 0 22px; height:22px; font-size:10px; }
  .fase button u{ display:block; font-size:8.5px; letter-spacing:.12em; }
  .fase button small{ display:none; }
  .fase button.aan small{ display:none; }
}
@media (max-width:480px){
  .fase button u{ font-size:8px; letter-spacing:.06em; }
}

/* ══ drie vormen: de reis, het A2-blad, de volledige Blueprint ══ */
.vormenkop{ display:flex; align-items:baseline; gap:16px;
  margin:clamp(30px,4.5vw,54px) 0 6px; }
.vormenkop h3, .vormenkop h2{ font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(22px,3vw,30px); color:#F6F0E7; margin:0; }
.vormenkop span{ flex:1; height:1px; background:rgba(201,169,110,.35); }
.vormenkop em{ font-family:'Inter',system-ui,sans-serif; font-style:normal; font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--goudlicht); white-space:nowrap; }
.vormenlead{ font-size:15.5px; color:var(--ink2); max-width:62ch; margin:0 0 20px; }

.vormen{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .vormen{ grid-template-columns:1fr; } }
.vorm{ position:relative; display:flex; flex-direction:column;
  border:1px solid rgba(201,169,110,.28); background:rgba(255,255,255,.03);
  padding:22px 22px 22px; }
.vorm.hier{ border-color:rgba(201,169,110,.75); background:rgba(201,169,110,.09); }
.vormteken{ font-family:'Cormorant Garamond',serif; font-size:20px; line-height:1;
  color:var(--goudlicht); }
.vormlbl{ display:block; margin-top:14px; font-size:9.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--goud); }
.vorm b{ display:block; margin-top:8px; font-family:'Cormorant Garamond',serif;
  font-weight:400; font-size:22px; line-height:1.2; color:#F6F0E7; }
.vorm p{ margin-top:9px; font-size:14.5px; line-height:1.62; color:var(--ink3); }
.vormvoor{ display:block; margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(201,169,110,.22);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px;
  color:var(--goudlicht); }
.vorm .knop{ flex:0 0 auto; margin-top:auto; margin-bottom:0; align-self:stretch;
  padding:13px 16px; }
.vormvoor + .knop{ margin-top:16px; }
.vormhier{ margin-top:auto; padding-top:16px; font-size:9.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--goudlicht); }
.vormennoot{ margin-top:16px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:16.5px; color:var(--goudlicht); }

/* dezelfde drie vormen op de lichte fase 3 */
#integratie .vormenkop h3, #integratie .vormenkop h2{ color:#1A1410; }
#integratie .vormenkop span{ background:rgba(154,123,46,.4); }
#integratie .vormenkop em, #integratie .vormlbl,
#integratie .vormteken, #integratie .vormhier{ color:var(--goudprint); }
#integratie .vormenlead{ color:#3A2E22; }
#integratie .vorm{ background:#FFFDFA; border-color:rgba(154,123,46,.35); }
#integratie .vorm.hier{ border-color:rgba(154,123,46,.8); background:#FBF3E4; }
#integratie .vorm b{ color:#1A1410; }
#integratie .vorm p{ color:#4A3B2C; }
#integratie .vormvoor{ color:#6E5518; border-top-color:rgba(154,123,46,.3); }
#integratie .vormennoot{ color:#6E5518; }

/* ══ welkomstscherm als drie schuifpanelen ═══════════════════ */
.drempel{ display:block; overflow:hidden; align-items:stretch; background:#0A0705; }
.dspoor{ display:flex; width:100%; height:100%;
  transition:transform .6s cubic-bezier(.33,0,.15,1); will-change:transform; }
@media (prefers-reduced-motion:reduce){ .dspoor{ transition:none; } }
.dpaneel{ flex:0 0 100%; width:100%; height:100%; position:relative;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.dp1{ background:#0A0705; }
.dp2, .dp3{ background:#FAF6EF; color:#241C16; }

/* achtergrondbeeld hoort bij paneel 1, niet bij het hele scherm */
.dp1 .dbg, .dp1 .dwaas{ position:absolute; }
.dp1 .dvoet{ position:absolute; }

.dpaneel > .dbinnen{ min-height:100%; margin:0 auto; display:flex;
  flex-direction:column; justify-content:center; }

/* teller, stippen en pijlen */
.dteller{ position:absolute; top:24px; left:30px; z-index:6; font-size:10px;
  letter-spacing:.28em; color:rgba(246,240,231,.6); pointer-events:none; }
.drempel.licht .dteller{ color:var(--goudprint); }
.dfases{ z-index:6; }
.drempel.licht .dfases{ color:var(--goudprint); }

.dpijl{ position:absolute; top:50%; transform:translateY(-50%); z-index:7;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:20px; line-height:1;
  background:rgba(10,7,5,.55); border:1px solid rgba(201,169,110,.55);
  color:#E8CE98; transition:background .2s, border-color .2s, box-shadow .3s; }
.dpijl.volgende{ right:16px; }
.dpijl.vorige{ left:16px; }
.dpijl:hover{ background:rgba(201,169,110,.22); border-color:rgba(201,169,110,.9); }
.dpijl.klaar{ border-color:#C9A96E; box-shadow:0 0 0 0 rgba(201,169,110,.55);
  animation:pols 2.2s ease-out infinite; }
@keyframes pols{ 70%{ box-shadow:0 0 0 14px rgba(201,169,110,0); }
                100%{ box-shadow:0 0 0 0 rgba(201,169,110,0); } }
@media (prefers-reduced-motion:reduce){ .dpijl.klaar{ animation:none; } }
.drempel.licht .dpijl{ background:rgba(255,253,250,.85); border-color:rgba(154,123,46,.5);
  color:var(--goudprint); }
.drempel.licht .dpijl:hover{ background:#FBF3E4; }

.dstippen{ position:absolute; left:0; right:0; bottom:20px; z-index:6;
  display:flex; justify-content:center; gap:22px; }
.dstippen button{ border:0; background:none; cursor:pointer; padding:4px;
  line-height:1; font-size:16px; color:rgba(201,169,110,.42);
  transition:color .25s, transform .25s; }
.dstippen button:hover{ color:rgba(201,169,110,.8); }
.dstippen button.aan{ color:#C9A96E; transform:scale(1.3); }
.drempel.licht .dstippen button{ color:rgba(154,123,46,.4); }
.drempel.licht .dstippen button.aan{ color:var(--goudprint); }

/* ── paneel 2: de ene vraag ── */
.dlicht{ color:#241C16; max-width:620px;
  padding:clamp(40px,7vh,74px) 26px clamp(78px,10vh,104px); }
.dmerk.licht img{ height:clamp(34px,5vh,50px); }
.dmerk.licht b{ color:#1A1410; }
.dp2 .dlabel{ display:block; font-size:10px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--goudprint); margin-top:6px; }
.dstreep{ width:44px; height:1px; background:rgba(154,123,46,.6); margin:16px auto 22px; }
.dp2 h1{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(32px,5.6vh,52px); line-height:1.14; color:#1A1410; margin:0 0 26px; }
.dp2 .dtekst{ font-size:16px; line-height:1.78; color:#3A2E22; }
.dp2 .dtekst p{ margin:0 0 16px; color:inherit; font-size:inherit; }
.dp2 .dtekst em{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:18px; color:var(--goudprint); display:inline; margin:0; }
.dp2 .dtekst b{ font-weight:500; }
.dbinnen .dknop, .dknop{ display:inline-flex; align-items:center; justify-content:center; gap:14px;
  margin:30px auto 0; padding:17px 40px; min-width:min(320px,80vw);
  background:#866B28; border:1px solid #9A7B2E; color:#FFF8EC; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; transition:background .2s; }
.dbinnen .dknop:hover, .dknop:hover{ background:#7F6524; border-color:#7F6524; }
.dknop i{ font-style:normal; }
.donder{ display:block; margin-top:26px; font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:#7A6C5A; }

/* ── paneel 3: het overzicht van de reis ── */
.dreis{ max-width:1180px; justify-content:flex-start;
  padding:clamp(30px,5vh,54px) clamp(20px,3vw,40px) clamp(56px,7vh,80px); }
.dreis h1{ font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(34px,5.6vw,58px); color:#1A1410; margin:4px 0 6px; }
.dreissub{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:#7A6C5A; margin-bottom:clamp(22px,3vh,34px); }
.dreisrechts{ position:absolute; top:clamp(30px,5vh,54px); right:clamp(20px,3vw,40px);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px;
  color:var(--goudprint); text-align:right; max-width:150px; }

.dfasen{ display:flex; align-items:stretch; gap:0; text-align:left; }
.dpijltje{ flex:0 0 auto; align-self:center; padding:0 8px; color:var(--goudprint); font-size:15px; }
.dfase{ flex:1 1 0; position:relative; --zij:20px; padding:34px var(--zij) 0;
  border:1px solid rgba(154,123,46,.3); display:flex; flex-direction:column; }
.dfase.df1{ background:#12100D; border-color:rgba(201,169,110,.3); }
.dfase.df2{ background:linear-gradient(160deg,#241C13 0%,#4A3A24 60%,#6B5539 100%); }
.dfase.df3{ background:#FFFDFA; }
.dfasenr{ position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:#FAF6EF; border:1px solid rgba(154,123,46,.55);
  font-family:'Cormorant Garamond',serif; font-size:16px; color:var(--goudprint); }
.dfaselbl{ display:block; font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(232,206,152,.8); text-align:center; }
.df3 .dfaselbl{ color:var(--goudprint); }
.dfase h3, .dfase h2{ font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(23px,2.6vw,32px); color:#F6F0E7; margin:4px 0 2px; text-align:center; }
.df3 h3, .df3 h2{ color:#1A1410; }
.dfasezin{ display:block; text-align:center; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:16px; color:#C9A96E; margin-bottom:12px; }
.df3 .dfasezin{ color:var(--goudprint); }
.dfaseuit{ font-size:13.5px; line-height:1.66; color:rgba(246,240,231,.8);
  text-align:center; margin-bottom:16px; }
.df3 .dfaseuit{ color:#4A3B2C; }

.dkaartjes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dkaartje{ border:1px solid rgba(201,169,110,.25); padding:8px 8px 10px; text-align:center; }
.dkaartje img{ width:100%; height:52px; object-fit:cover; display:block; margin-bottom:7px; }
.dkgetal{ display:block; height:52px; line-height:52px; margin-bottom:7px;
  font-family:'Cormorant Garamond',serif; font-size:26px; color:#C9A96E;
  background:rgba(201,169,110,.1); }
.dkaartje b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:14px; color:#F3E6C8; line-height:1.25; }
.dkaartje small{ display:block; margin-top:3px; font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,240,231,.5); line-height:1.4; }

.drijen{ display:flex; flex-direction:column; gap:8px; }
.drij{ display:flex; align-items:center; gap:10px;
  border:1px solid rgba(201,169,110,.28); padding:8px 10px; }
.df3 .drij{ border-color:rgba(154,123,46,.3); }
.drijnr{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; display:grid;
  place-items:center; border:1px solid rgba(201,169,110,.5);
  font-family:'Cormorant Garamond',serif; font-size:11px; color:#C9A96E; }
.df3 .drijnr{ border-color:rgba(154,123,46,.5); color:var(--goudprint); }
.drij img{ flex:0 0 34px; width:34px; height:34px; object-fit:cover; }
.drijtekst b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:15px; color:#F3E6C8; line-height:1.2; }
.df3 .drijtekst b{ color:#1A1410; }
.drijtekst em{ display:block; font-size:11px; color:rgba(246,240,231,.6);
  font-style:italic; font-family:'Cormorant Garamond',serif; margin-top:1px; }
.df3 .drijtekst em{ color:#6B5B4A; }

.duitgelicht{ display:flex; align-items:center; gap:10px; margin-top:10px;
  border:1px solid rgba(201,169,110,.4); background:rgba(201,169,110,.1); padding:9px 10px; }
.duitgelicht img{ flex:0 0 38px; width:38px; height:46px; object-fit:cover; }
.duitgelicht b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:15px; color:#F3E6C8; line-height:1.2; }
.duitgelicht small{ display:block; margin-top:3px; font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,240,231,.6); line-height:1.4; }

.dfaseslot{ display:block; text-align:center; margin:16px 0 6px;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:#C9A96E; }
.df3 .dfaseslot{ color:var(--goudprint); }
.dfaseres{ display:block; text-align:center; font-size:8px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(246,240,231,.5); margin-bottom:12px; }
.df3 .dfaseres{ color:#7A6C5A; }
/* de band loopt tot precies binnen de rand van de kaart, wat de kaart ook
   voor zijmarge heeft op dit scherm */
.dband{ position:relative; margin:auto calc(-1 * var(--zij,20px)) 0; }
.dband img{ width:100%; height:110px; object-fit:cover; display:block; }
.dband span{ position:absolute; left:14px; bottom:12px; right:14px; font-size:8px;
  letter-spacing:.22em; text-transform:uppercase; color:#F6F0E7; line-height:1.7;
  text-shadow:0 1px 8px rgba(0,0,0,.9); }

.dknop.groot{ margin-top:clamp(22px,3vh,34px); }
.dreisvoet{ display:flex; justify-content:space-between; gap:20px;
  margin-top:clamp(18px,2.6vh,28px); font-size:8.5px; letter-spacing:.22em;
  text-transform:uppercase; color:#7A6C5A; line-height:1.9; }
.dreisvoet span:last-child{ text-align:right; }

@media (max-width:900px){
  .dfasen{ flex-direction:column; }
  .dpijltje{ align-self:center; padding:10px 0; transform:rotate(90deg); }
  .dfase{ padding-bottom:0; }
  .dfasenr{ top:-16px; }
  .dreisrechts{ position:static; display:block; max-width:none; text-align:center;
    margin-bottom:10px; }
  .dreisvoet{ flex-direction:column; gap:8px; text-align:center; }
  .dreisvoet span:last-child{ text-align:center; }
}
@media (max-width:600px){
  .dteller{ top:16px; left:18px; }
  .dpijl{ width:40px; height:40px; }
  .dpijl.volgende{ right:10px; }
  .dpijl.vorige{ left:10px; }
  .dp1 .dvoet{ display:none; }
  .dstippen{ bottom:12px; }
  .dreis, .dlicht{ padding-left:18px; padding-right:18px; }
}

/* hidden moet winnen van de display-regels hierboven */
.drempel [hidden]{ display:none !important; }

/* paneel 3 compacter, zodat de hele reis in één beeld past */
.dreis .dmerk{ margin-bottom:clamp(10px,1.6vh,18px); }
.dreis .dmerk img{ height:clamp(26px,3.4vh,38px); }
.dreis .dmerk b{ font-size:clamp(20px,3vh,30px); }
.dreis h1{ font-size:clamp(30px,4.6vh,48px); margin:0 0 4px; }
.dreissub{ margin-bottom:clamp(16px,2.4vh,26px); }
.dreisrechts{ top:clamp(50px,6.6vh,72px); }
.dfase{ --zij:clamp(14px,1.4vw,20px); padding:clamp(24px,3.4vh,34px) var(--zij) 0; }
.dfaseuit{ font-size:12.5px; margin-bottom:clamp(10px,1.6vh,16px); }
.dkaartje img, .dkgetal{ height:clamp(38px,5vh,52px); }
.dkgetal{ line-height:clamp(38px,5vh,52px); }
.dband img{ height:clamp(74px,10vh,110px); }
.dfaseslot{ margin:clamp(10px,1.6vh,16px) 0 5px; font-size:15px; }
.dknop.groot{ margin-top:clamp(16px,2.2vh,28px); }
.dreisvoet{ margin-top:clamp(12px,1.8vh,22px); }

/* de stippen liggen over de inhoud, dus een zachte waas eronder */
.dstippen::before{ content:""; position:absolute; left:0; right:0; bottom:-20px; top:-22px;
  background:linear-gradient(180deg,rgba(250,246,239,0),rgba(250,246,239,.92) 55%);
  pointer-events:none; z-index:-1; }
.drempel:not(.licht) .dstippen::before{
  background:linear-gradient(180deg,rgba(10,7,5,0),rgba(10,7,5,.85) 55%); }

/* leesbare bijschriften op de beeldbanden onder elke fasekolom */
.dband::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,6,4,0) 30%,rgba(8,6,4,.78) 100%); }
.dband span{ z-index:2; }

/* mobiel: de fasestrook bovenaan zou het spoor wegduwen, dus die blijft absoluut */
@media (max-width:600px){
  .drempel .dfases{ position:absolute; top:16px; right:16px; margin:0;
    max-width:60vw; text-align:right; font-size:7.5px; letter-spacing:.18em; line-height:1.6; }
  .dstippen::before{ top:-16px; bottom:-16px; }
}

/* mobiel: de pijlen onderaan naast de maanstippen, niet over de tekst heen */
@media (max-width:600px){
  .dpijl{ top:auto; bottom:12px; transform:none; width:38px; height:38px; font-size:17px; }
  .dpijl.volgende{ right:14px; }
  .dpijl.vorige{ left:14px; }
  .dstippen{ bottom:22px; }
}

/* ══ het spoor is versleepbaar ═══════════════════════════════ */
.dspoor{ cursor:grab; touch-action:pan-y; }
.dspoor:active{ cursor:grabbing; }
.dspoor.sleept{ transition:none; cursor:grabbing; }
.dpaneel img{ -webkit-user-drag:none; user-select:none; }
.dpaneel h1, .dpaneel p, .dpaneel b, .dpaneel em, .dpaneel small{ user-select:none; }

/* ══ paneel 2 rustiger: kleinere tekst, meer lucht ══════════ */
.dp2 h1{ font-size:clamp(25px,3.9vh,38px); margin:0 0 20px; }
.dp2 .dtekst{ font-size:14.5px; line-height:1.75; max-width:46ch; margin:0 auto; }
.dp2 .dtekst p{ margin:0 0 11px; }
.dp2 .dtekst em{ font-size:16px; }
.dp2 .dlabel{ font-size:9px; letter-spacing:.32em; }
.dstreep{ margin:13px auto 18px; }
.dbinnen .dknop, .dknop{ padding:14px 32px; font-size:10px; letter-spacing:.24em; }
.dp2 .dknop{ margin-top:24px; }
.donder{ margin-top:20px; font-size:9px; }
.dmerk.licht img{ height:clamp(30px,4vh,42px); }
.dmerk.licht b{ font-size:clamp(22px,3.4vh,32px); letter-spacing:.26em; }

/* ══ paneel 3 compacter en scherper ═════════════════════════ */
.dreis{ max-width:1120px; }
.dreis .dmerk{ margin-bottom:clamp(6px,1vh,12px); }
.dreis .dmerk img{ height:clamp(22px,2.8vh,32px); }
.dreis .dmerk b{ font-size:clamp(17px,2.4vh,24px); }
.dreis h1{ font-size:clamp(25px,3.7vh,40px); }
.dreissub{ font-size:8.5px; letter-spacing:.26em; margin-bottom:clamp(12px,1.8vh,20px); }
.dreisrechts{ font-size:13px; top:clamp(40px,5.2vh,58px); max-width:130px; }
.dfase{ --zij:clamp(12px,1.2vw,17px); padding:clamp(20px,2.8vh,28px) var(--zij) 0; }
.dfasenr{ width:27px; height:27px; top:-14px; font-size:14px; }
.dfaselbl{ font-size:8px; letter-spacing:.26em; }
.dfase h3, .dfase h2{ font-size:clamp(19px,2.9vh,26px); }
.dfasezin{ font-size:14px; margin-bottom:9px; }
.dfaseuit{ font-size:11.5px; line-height:1.6; margin-bottom:clamp(8px,1.3vh,13px); }
.dkaartjes{ gap:6px; }
.dkaartje{ padding:6px 6px 8px; }
.dkaartje img, .dkgetal{ height:clamp(32px,4.2vh,44px); }
.dkgetal{ line-height:clamp(32px,4.2vh,44px); font-size:22px; }
.dkaartje b{ font-size:12.5px; }
.dkaartje small{ font-size:7px; letter-spacing:.13em; }
.drijen{ gap:6px; }
.drij{ padding:6px 8px; gap:8px; }
.drijnr{ flex:0 0 21px; width:21px; height:21px; font-size:10px; }
.drij img{ flex:0 0 30px; width:30px; height:30px; }
.drijtekst b{ font-size:13.5px; }
.drijtekst em{ font-size:10px; }
.duitgelicht{ padding:7px 8px; gap:8px; margin-top:8px; }
.duitgelicht img{ flex:0 0 32px; width:32px; height:40px; }
.duitgelicht b{ font-size:13.5px; }
.duitgelicht small{ font-size:7px; }
.dfaseslot{ font-size:13.5px; margin:clamp(8px,1.3vh,13px) 0 4px; }
.dfaseres{ font-size:7.5px; margin-bottom:9px; }
.dband img{ height:clamp(58px,7.6vh,86px); }
.dband span{ font-size:7.5px; letter-spacing:.18em; left:10px; right:10px; bottom:9px; }
.dreisvoet{ font-size:8px; margin-top:clamp(10px,1.4vh,18px); }
.dknop.groot{ margin-top:clamp(12px,1.8vh,22px); }

/* beeldjes scherp houden op schermen met hoge resolutie */
.dkaartje img, .drij img, .duitgelicht img, .dband img{ image-rendering:auto; }

/* paneel 3 nog wat strakker, zodat de hele reis in één beeld past */
.dreis{ padding:clamp(22px,3.2vh,40px) clamp(18px,2.6vw,34px) clamp(42px,5.4vh,60px); }
.dreis h1{ font-size:clamp(23px,3.3vh,36px); }
.dfase{ padding-top:clamp(17px,2.4vh,24px); }
.dfasezin{ margin-bottom:7px; }
.dkaartje{ padding:5px 5px 7px; }
.dkaartje img, .dkgetal{ height:clamp(28px,3.6vh,38px); }
.dkgetal{ line-height:clamp(28px,3.6vh,38px); font-size:20px; }
.dkaartje b{ font-size:12px; }
.dkaartje small{ font-size:6.5px; }
.dband img{ height:clamp(50px,6.5vh,74px); }
.dreisvoet{ margin-top:clamp(8px,1.2vh,14px); line-height:1.75; }

/* op een laag venster staan de zes kaartjes op drie kolommen in plaats van twee */
@media (min-width:900px) and (max-height:1060px){
  .dkaartjes{ grid-template-columns:repeat(3,1fr); }
  .dkaartje small{ display:none; }
}

/* laatste slag: de kolommen strakker zodat paneel 3 op een laptop past */
.dreis .dmerk img{ height:clamp(18px,2.2vh,26px); margin-bottom:5px; }
.dreis .dmerk b{ font-size:clamp(15px,2vh,20px); }
.dfaseuit{ font-size:11px; line-height:1.55; }
.drij{ padding:5px 7px; gap:7px; }
.drij img{ flex:0 0 26px; width:26px; height:26px; }
.drijnr{ flex:0 0 19px; width:19px; height:19px; font-size:9.5px; }
.drijtekst b{ font-size:13px; line-height:1.15; }
.drijtekst em{ font-size:9.5px; }
.duitgelicht{ padding:5px 7px; }
.duitgelicht img{ flex:0 0 28px; width:28px; height:34px; }
.duitgelicht b{ font-size:13px; }
.dfaseslot{ font-size:12.5px; line-height:1.3; }
.dband img{ height:clamp(46px,5.8vh,66px); }
.dknop.groot{ padding:12px 30px; }
.dreisvoet{ line-height:1.6; }

/* terug naar twee kaartjes naast elkaar: zo vult kolom 1 zich net als in het ontwerp */
@media (min-width:900px) and (max-height:1060px){
  .dkaartjes{ grid-template-columns:1fr 1fr; }
  .dkaartje small{ display:block; }
}
/* de kleinste tekst iets groter en met meer contrast, dat leest scherper */
.dkaartje small{ font-size:7.5px; letter-spacing:.14em; color:rgba(246,240,231,.62); }
.dband span{ font-size:8.5px; letter-spacing:.16em; color:#FFFCF5;
  text-shadow:0 1px 3px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,.8); }
.dfaseres{ font-size:8px; letter-spacing:.18em; color:rgba(246,240,231,.62); }
.df3 .dfaseres{ color:#6B5B4A; }
.dreisvoet{ font-size:8.5px; letter-spacing:.18em; color:#6B5B4A; }
.dreissub{ font-size:9px; letter-spacing:.24em; color:#6B5B4A; }

/* de waas achter de maanstippen korter, zodat hij niet over de knop valt */
.dstippen::before{ top:-10px; bottom:-18px;
  background:linear-gradient(180deg,rgba(250,246,239,0),rgba(250,246,239,.75) 70%); }
.drempel:not(.licht) .dstippen::before{
  background:linear-gradient(180deg,rgba(10,7,5,0),rgba(10,7,5,.7) 70%); }

/* de knop mag niet meegroeien met de kolom */
.dbinnen .dknop, .dknop{ flex:0 0 auto; align-self:center; }
.dbinnen .knop{ flex:0 0 auto; }
.donder{ color:#6B5B4A; font-size:9.5px; letter-spacing:.26em; }

/* het spoor wordt per beeldje berekend, dus geen CSS-overgang meer */
.dspoor{ transition:none; }
.dpaneel{ backface-visibility:hidden; }

/* de achtergrond van paneel 1 is breder dan het beeld, zodat hij mee kan schuiven
   zonder dat de rand zichtbaar wordt */
.dp1 .dbg{ width:180%; left:-40%; right:auto; }

/* ══ de panelen staan onder elkaar en schuiven van beneden naar boven ══ */
.dspoor{ flex-direction:column; touch-action:none; }
.dpaneel{ flex:0 0 100%; width:100%; height:100%; overflow:hidden; }
.dpaneel.scrollt{ overflow-y:auto; overscroll-behavior:contain;
  touch-action:pan-y; -webkit-overflow-scrolling:touch; }

/* de achtergrond van paneel 1 is hoger dan het beeld, zodat hij mee kan schuiven
   zonder dat de rand zichtbaar wordt */
.dp1 .dbg{ width:100%; left:0; right:0; height:180%; top:-40%; bottom:auto; }

/* de pijlen als paar onderaan het midden: omhoog terug, omlaag verder */
.dpijlen{ position:absolute; left:0; right:0; bottom:18px; z-index:7;
  display:flex; justify-content:center; align-items:center; gap:14px;
  pointer-events:none; }
.dpijlen .dpijl{ pointer-events:auto; }
.dpijl{ position:static; top:auto; right:auto; left:auto; }
.dpijl.volgende{ right:auto; transform:rotate(90deg); }
.dpijl.vorige{ left:auto; transform:rotate(-90deg); }
.dpijl.klaar{ animation:pols 2.2s ease-out infinite; }

/* de maanstanden rechts, onder elkaar */
.dstippen{ left:auto; right:22px; top:50%; bottom:auto;
  transform:translateY(-50%); flex-direction:column; gap:20px; }
.dstippen::before{ display:none; }

@media (max-width:600px){
  .dpijlen{ bottom:14px; gap:12px; }
  .dstippen{ right:12px; gap:16px; }
  .dpijl{ width:38px; height:38px; }
}
/* onderaan wat lucht, zodat de pijlen en de tekst elkaar niet raken */
.dlicht{ padding-bottom:clamp(86px,11vh,116px); }
.dreis{ padding-bottom:clamp(70px,8vh,92px); }
.dp1 .dbinnen{ padding-bottom:clamp(74px,9vh,100px); }

/* mobiel: paneel 1 moet in één beeld passen, dan schuift de eerste veeg meteen door */
@media (max-height:760px){
  .dp1 .dmerk{ margin-bottom:clamp(10px,2vh,20px); }
  .dp1 .dmerk img{ height:clamp(28px,4.4vh,44px); }
  .dp1 .dmerk span{ margin-top:5px; }
  .dp1 .dbinnen{ padding-top:clamp(20px,3.5vh,44px); padding-bottom:clamp(62px,8vh,84px); }
  .dp1 .druit{ margin:clamp(12px,2vh,22px) 0 8px; }
  .dvideo{ max-height:30vh; }
}

/* het reisoverzicht krimpt vanaf de bovenrand, zodat het altijd in beeld past */
.dreis{ transform-origin:top center; }

/* mobiel: de knoppen naar het dashboard en naar het begin waren verborgen,
   omdat ze ook de klasse .terugd dragen. Hier expliciet weer aanzetten. */
@media (max-width:820px){
  .zijbalk .terugd#naar-dashboard{ display:inline-block; }
  .zijbalk .naar-start{ display:inline-block; }
}

/* op een breed scherm mag de poster breder, dan hoeft hij minder te krimpen */
@media (min-width:1600px){ .dreis{ max-width:1340px; } }
@media (min-width:1900px){ .dreis{ max-width:1480px; } }

/* beide chevrons een kwartslag met de klok mee: › wordt omlaag, ‹ wordt omhoog */
.dpijl.vorige{ transform:rotate(90deg); }

/* ══ fase 2 loopt van donker bovenaan naar licht onderaan ══════ */
#helderheid{
  --donkerTot:820px; --lichtVanaf:1040px;
  background:linear-gradient(180deg,
    #0D0A07 0px,
    #0D0A07 var(--donkerTot),
    #2A2118 calc(var(--donkerTot) + (var(--lichtVanaf) - var(--donkerTot)) * 0.28),
    #6B5B47 calc(var(--donkerTot) + (var(--lichtVanaf) - var(--donkerTot)) * 0.55),
    #C9BFAE calc(var(--donkerTot) + (var(--lichtVanaf) - var(--donkerTot)) * 0.78),
    #FAF6EF var(--lichtVanaf));
  background-repeat:no-repeat;
  background-color:#FAF6EF;
  margin:0 calc(-1 * clamp(22px,5vw,70px));
  padding:0 clamp(22px,5vw,70px) 1px;
}
/* de hero mag nog steeds over de volle breedte */
#helderheid .hero{ margin-left:calc(-1 * clamp(22px,5vw,70px));
  margin-right:calc(-1 * clamp(22px,5vw,70px)); }

/* de kop boven de drie lagen staat nog op het donkere deel */
#helderheid .okop{ color:var(--goudlicht); }

/* ── alles onder de kaarten in de lichte stelling ── */
#helderheid .faseonder{ color:#241C16; }
#helderheid .faseonder .laag,
#helderheid .faseonder .plbl,
#helderheid .faseonder .vormlbl,
#helderheid .faseonder .vormteken,
#helderheid .faseonder .vormhier,
#helderheid .faseonder .vormenkop em{ color:var(--goudprint); }
#helderheid .faseonder .vormenkop h3, #helderheid .faseonder .vormenkop h2{ color:#1A1410; }
#helderheid .faseonder .vormenkop span{ background:rgba(154,123,46,.4); }
#helderheid .faseonder .vormenlead{ color:#3A2E22; }
#helderheid .faseonder .vorm{ background:#FFFDFA; border-color:rgba(154,123,46,.35); }
#helderheid .faseonder .vorm.hier{ border-color:rgba(154,123,46,.8); background:#FBF3E4; }
#helderheid .faseonder .vorm b{ color:#1A1410; }
#helderheid .faseonder .vorm p{ color:#4A3B2C; }
#helderheid .faseonder .vormvoor{ color:#6E5518; border-top-color:rgba(154,123,46,.3); }
#helderheid .faseonder .vormennoot{ color:#6E5518; }

#helderheid .faseonder .bdvlak{ border:1px solid rgba(154,123,46,.35); }
#helderheid .faseonder .bdvlak h3, #helderheid .faseonder .bdvlak h2{ color:#FBF6EC; }
#helderheid .faseonder .bdvlak p{ color:rgba(246,240,231,.86); }
#helderheid .faseonder .bdlijst li{ color:#F3E6C8; }
#helderheid .faseonder .bdlijst i{ border-color:rgba(201,169,110,.6); color:var(--goudlicht); }

#helderheid .faseonder .knop{ background:#866B28; color:#FFF8EC; border:1px solid #9A7B2E; }
#helderheid .faseonder .knop:hover{ background:#7F6524; border-color:#7F6524; }
#helderheid .faseonder .knop.licht{ background:none; color:#6E5518;
  border-color:rgba(154,123,46,.5); }
#helderheid .faseonder .knop.licht:hover{ background:rgba(154,123,46,.1); }
#helderheid .faseonder .vorm .knop{ background:none; color:#6E5518;
  border-color:rgba(154,123,46,.5); }
#helderheid .faseonder .vorm .knop:hover{ background:rgba(154,123,46,.1); }

#helderheid .faseonder .slotbalk{ background:#FFFDFA; border-color:rgba(154,123,46,.35); }
#helderheid .faseonder .slottekst h3, #helderheid .faseonder .slottekst h2{ color:#1A1410; }
#helderheid .faseonder .slottekst p{ color:#3A2E22; }
#helderheid .faseonder .slotknop{ border-left-color:rgba(154,123,46,.3); }
#helderheid .faseonder .slotknop span{ border-color:rgba(154,123,46,.5); color:var(--goudprint); }
#helderheid .faseonder .slotknop small{ color:#6B5B4A; }

#helderheid .faseonder .faseslot{ border-top-color:rgba(154,123,46,.35); }
#helderheid .faseonder .faseslot p{ color:#3A2E22; }
#helderheid .faseonder .sub{ color:#6B5B4A; }
#helderheid .faseonder footer{ border-top-color:rgba(154,123,46,.35); color:#6B5B4A; }
#helderheid .faseonder footer em{ color:var(--goudprint); }

/* de zijbalk loopt mee met het verloop zolang fase 2 open is */
body[data-fase="helderheid"] .zijbalk{
  background:linear-gradient(180deg,#0D0A07 0%,#0D0A07 34%,#4A3A28 56%,#CFC2AE 76%,#FAF6EF 90%); }
body[data-fase="helderheid"] .zijbalk .terugd,
body[data-fase="helderheid"] .naar-start{ color:#4A3B2C; }
body[data-fase="helderheid"] .zslot{ color:#6E5518; }
@media (max-width:820px){
  body[data-fase="helderheid"] .zijbalk{ background:#0D0A07; }
  body[data-fase="helderheid"] .zijbalk .terugd,
  body[data-fase="helderheid"] .naar-start{ color:var(--goudlicht); }
}

/* het blauwdrukvlak blijft een donker beeldvlak: knoppen daarin houden hun
   lichte stijl, anders vallen ze weg tegen de foto */
#helderheid .faseonder .bdvlak .knop{ background:rgba(201,169,110,.16); color:#EFDCAE;
  border:1px solid rgba(201,169,110,.6); }
#helderheid .faseonder .bdvlak .knop.goud{ background:rgba(201,169,110,.34); }
#helderheid .faseonder .bdvlak .knop.licht{ background:none; color:#EFDCAE;
  border-color:rgba(201,169,110,.6); }
#helderheid .faseonder .bdvlak .knop:hover{ background:rgba(201,169,110,.28); }
#helderheid .faseonder .bdnoot{ color:var(--goudlicht);
  border-bottom-color:rgba(201,169,110,.45); }

/* lucht tussen de kaartenrij en het lichte deel, zodat het verloop
   niet dwars door de kop heen loopt */
#helderheid .faseonder{ padding-top:clamp(96px,13vh,150px); }
#helderheid .faseonder > .vormenkop:first-child{ margin-top:0; }

/* ══ mobiel: één balk onderaan met de pijlen en de maanstanden ══ */
@media (max-width:700px){
  .dstippen{ left:0; right:0; top:auto; bottom:20px; transform:none;
    flex-direction:row; justify-content:center; gap:20px; }
  .dpijlen{ bottom:14px; justify-content:space-between; padding:0 14px;
    left:0; right:0; }
  .dpijl{ width:40px; height:40px; }
  /* een zachte band eronder, zodat de tekst niet door de knoppen heen loopt */
  .drempel::after{ content:""; position:absolute; left:0; right:0; bottom:0;
    height:104px; pointer-events:none; z-index:5;
    background:linear-gradient(180deg,rgba(10,7,5,0),rgba(10,7,5,.82) 52%,rgba(10,7,5,.94)); }
  .drempel.licht::after{
    background:linear-gradient(180deg,rgba(250,246,239,0),rgba(250,246,239,.86) 52%,rgba(250,246,239,.97)); }
  /* en genoeg lucht onderaan elk paneel */
  .dp1 .dbinnen{ padding-bottom:118px; }
  .dlicht{ padding-bottom:124px; }
  .dreis{ padding-bottom:124px; }
}
@media (max-width:700px){
  .dp1 .dvideo{ max-height:27vh; }
  .dp1 .druit{ margin:clamp(8px,1.4vh,16px) 0 6px; }
}

/* ══ aanraakgebaren ═══════════════════════════════════════════
   touch-action op het spoor gold ook voor de panelen eronder, en dat
   blokkeerde het scrollen van een lang paneel op een telefoon. Het spoor
   laat de gebaren nu vrij en elk paneel bepaalt het zelf: een paneel dat
   past geeft de beweging aan de pagina, een paneel dat niet past scrollt
   zelf met de gebruikelijke uitloop. */
.dspoor{ touch-action:auto; }
.dpaneel{ touch-action:none; }
.dpaneel.scrollt{ touch-action:pan-y; overflow-y:auto; overscroll-behavior:contain; }

/* de band onderaan iets lager, zodat er minder tekst onder verdwijnt */
@media (max-width:700px){
  .drempel::after{ height:88px; }
}

/* de startknop in de balk onderaan het laatste paneel */
.dpijl.starten{ background:#866B28; border-color:#9A7B2E; color:#FFF8EC;
  transform:none; font-size:17px; }
.dpijl.starten:hover{ background:#7F6524; border-color:#7F6524; }
.drempel.licht .dpijl.starten{ background:#866B28; border-color:#9A7B2E; color:#FFF8EC; }

/* ══ het uitklappaneel lichter en warmer ══════════════════════
   de zwarte sluier over het beeld was zo dicht dat het paneel bijna
   zwart werd; nu laat hij meer van de foto door en houdt de tekst
   toch genoeg rust eronder */
.okruimel{
  border-color:rgba(201,169,110,.5);
  background:
    linear-gradient(100deg, rgba(24,18,12,.90) 0%, rgba(24,18,12,.84) 38%,
      rgba(24,18,12,.54) 58%, rgba(24,18,12,.16) 80%, rgba(24,18,12,0) 100%),
    var(--paneelbeeld) right center / cover no-repeat, #1A1410; }
@media (max-width:1000px){
  .okruimel{ background:
    linear-gradient(180deg, rgba(24,18,12,.92) 0%, rgba(24,18,12,.87) 62%, rgba(24,18,12,.5) 100%),
    var(--paneelbeeld) center bottom / cover no-repeat, #1A1410; }
}
.okruimel .t{ color:#F2EADC; }
.okruimel ul.lijst li{ color:#EFE6D6; border-bottom-color:rgba(201,169,110,.24); }
.okruimel .h{ color:#FBF6EC; }
.okruimel .laag{ color:var(--goudlicht); }
.opad{ color:rgba(246,240,231,.7); }

/* de kopjes in de langere leestekst wat lucht geven */
.okruimel .blokje .h{ margin-top:8px; font-family:'Cormorant Garamond',serif;
  font-weight:400; font-size:clamp(20px,2.2vw,26px); line-height:1.24; }
.okruimel .blokje{ margin:0 0 26px; }
.okruimel .blokje .h + .t{ margin-top:8px; }
.okruimel{
  background:
    linear-gradient(100deg, rgba(24,18,12,.92) 0%, rgba(24,18,12,.89) 46%,
      rgba(24,18,12,.78) 62%, rgba(24,18,12,.30) 82%, rgba(24,18,12,0) 100%),
    var(--paneelbeeld) right center / cover no-repeat, #1A1410; }
@media (max-width:1000px){
  .okruimel{ background:
    linear-gradient(180deg, rgba(24,18,12,.93) 0%, rgba(24,18,12,.89) 66%, rgba(24,18,12,.55) 100%),
    var(--paneelbeeld) center bottom / cover no-repeat, #1A1410; }
}

/* Een paneel dat langer is dan het scherm scrollt met de vinger gewoon zoals
   de browser dat doet. Dat was eerder uitgezet ten gunste van onze eigen
   afhandeling, maar op een telefoon bleef het scherm daardoor hangen.
   Wisselen van paneel gaat via de pijlen, de stippen en een veeg op een
   paneel dat wél past. */
.dpaneel.scrollt{ touch-action:pan-y; -webkit-overflow-scrolling:touch; }



/* ══ fase 2: de drie lagen ══
   Ze blijven de gewone uitklapkaarten met beeld en plusknop, net als in
   fase 1. Alleen de kop erboven is anders. */
#helderheid .okop{ font-style:italic; color:var(--goudlicht);
  margin:clamp(26px,4vw,44px) 0 clamp(16px,2.4vw,26px); }

/* label rechtsboven in de hero */
.hrechts{ position:absolute; top:clamp(24px,4vw,44px); right:clamp(22px,5vw,70px);
  z-index:2; text-align:right; font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(232,206,152,.85); line-height:2; }
@media (max-width:820px){ .hrechts{ position:static; text-align:left;
  padding:0 clamp(22px,5vw,70px); margin-top:12px; } }

/* de cursieve regel en de vergrendelde kaart bij de drie vormen */
.vormzin{ display:block; margin-top:6px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:17px; color:var(--goudlicht); }
#helderheid .faseonder .vormzin, #integratie .vormzin{ color:var(--goudprint); }
.vormslot{ display:flex; align-items:center; gap:10px; margin-top:auto;
  padding:11px 14px; background:rgba(154,123,46,.10);
  border:1px solid rgba(154,123,46,.28); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; line-height:1.8; color:#6B5B4A; }
.vormslot i{ font-style:normal; font-size:13px; opacity:.65; }
.vormhier{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vormpijl{ flex:0 0 34px; width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:none; border:1px solid rgba(154,123,46,.5); color:var(--goudprint); font-size:14px;
  display:grid; place-items:center; transition:background .2s; }
.vormpijl:hover{ background:rgba(154,123,46,.14); }

/* afsluiting met een regel eromheen */
.faseslotkop{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.faseslotkop span{ flex:1; height:1px; background:rgba(154,123,46,.45); }
.faseslotkop em{ font-family:'Inter',system-ui,sans-serif; font-style:normal; font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--goudprint); text-align:center; }
#herkenning .faseslotkop span{ background:rgba(201,169,110,.4); }
#herkenning .faseslotkop em{ color:var(--goudlicht); }

/* ── fase 2, laatste verfijningen op het nieuwe ontwerp ── */
#helderheid .hero .hsub{ font-style:italic; color:var(--goudlicht);
  font-size:clamp(20px,2.8vw,28px); }
#helderheid .hero .hintro{ margin-top:18px; }
.hrechts{ top:clamp(52px,7vw,74px); }

/* de downloadknop in het A2-vlak houdt zijn eigen maat */
#helderheid .faseonder .bdvlak .knoppen{ justify-content:flex-start; }
#helderheid .faseonder .bdvlak .knop{ flex:0 0 auto; min-width:0; padding:15px 34px; }

/* de knop naar de volgende fase over de volle breedte, zoals in het ontwerp */
#helderheid .faseonder .knoppen.strak{ margin-top:clamp(18px,2.6vw,30px); }
#helderheid .faseonder .knoppen.strak .knop{ flex:1 1 auto; }
.faseslotkop{ max-width:760px; margin-left:auto; margin-right:auto; }

@media (max-width:820px){
  /* het tweeregelige label rechtsboven botst op mobiel met de fasestrip */
  .hrechts{ display:none; }
  /* kop, lijn en label onder elkaar in plaats van geknepen naast elkaar */
  .vormenkop{ flex-wrap:wrap; }
.vormenkop h3, .vormenkop h2{ flex:1 1 100%; }
  .vormenkop span{ flex:1 1 auto; }
  .vormenkop em{ flex:0 0 auto; }
  #helderheid .faseonder .bdvlak .knop{ width:100%; }
}

/* ── "dit zijn je eerste stappen" ── */

/* het kader onderin de hero van elke fase */
.hkader{ margin-top:clamp(20px,2.6vw,30px); max-width:56ch;
  border-left:2px solid rgba(201,169,110,.55); padding:2px 0 2px 16px; }
.hkader b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:400;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--goudlicht); margin-bottom:7px; }
.hkader span{ display:block; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:clamp(16px,1.7vw,19px); line-height:1.55;
  color:#F0E4CF; }
/* fase 3 heeft een lichte hero, daar leest het kader donker */
#integratie .hkader{ border-left-color:rgba(154,123,46,.55); }
#integratie .hkader b{ color:var(--goudprint); }
#integratie .hkader span{ color:#4A3B2C; }

/* de kop boven de fases in de zijbalk */
.zfasekop{ font-family:'Inter',system-ui,sans-serif; font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(201,169,110,.85);
  margin:0 0 10px; padding-left:2px; line-height:1.7; }

/* de uitleg onder de ondertitel van het reisoverzicht */
.dreis .dreisuitleg{ max-width:74ch; margin:0 auto clamp(18px,2.6vh,28px);
  font-size:14px; line-height:1.7; color:#4A3B2C; text-align:center; }
.dreis .dreissub{ margin-bottom:10px; }

@media (max-width:820px){
  .hkader{ margin-top:18px; padding-left:13px; }
  .zfasekop{ display:none; }
  .dreis .dreisuitleg{ font-size:13px; }
}

/* fase 3 heeft een lichte pagina, daar moet de afsluiting donker meelezen */
#integratie .faseslot{ border-top-color:rgba(154,123,46,.3); }
#integratie .faseslot p{ color:#3A2E22; }
#integratie .faseslotkop span{ background:rgba(154,123,46,.4); }
#integratie .faseslotkop em{ color:var(--goudprint); }
.faseslot.metkop{ border-top:0; padding-top:clamp(6px,1vw,12px); }

/* ── de spiegelregel ── */
.spiegel{ text-align:center; max-width:60ch; margin:clamp(26px,3.4vw,42px) auto;
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,32px);
  border-top:1px solid rgba(201,169,110,.28);
  border-bottom:1px solid rgba(201,169,110,.28); }
.spiegel i{ display:block; font-style:normal; font-size:12px;
  color:var(--goudlicht); opacity:.75; margin-bottom:9px; }
.spiegel b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:400;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--goudlicht); opacity:.85; margin-bottom:11px; }
.spiegel p{ margin:0; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-weight:300; font-size:clamp(19px,2.3vw,25px); line-height:1.5;
  color:#F3E6C8; }

/* fase 3 en het welkomstscherm hebben een lichte ondergrond */
#integratie .spiegel, .dp2 .spiegel{ border-color:rgba(154,123,46,.32); }
#integratie .spiegel i, #integratie .spiegel b,
.dp2 .spiegel i, .dp2 .spiegel b{ color:var(--goudprint); }
#integratie .spiegel p, .dp2 .spiegel p{ color:#3A2E22; }

/* op paneel 2 zonder kader en zonder label: daar is het een slotregel,
   geen apart blok, en de hoogte van het paneel is er krap */
.dp2 .spiegel{ border:0; padding:0; max-width:40ch;
  margin:clamp(14px,2vh,20px) auto clamp(2px,.6vh,8px); }
.dp2 .spiegel b{ display:none; }
.dp2 .spiegel i{ font-size:11px; margin-bottom:6px; }
.dp2 .spiegel p{ font-size:clamp(16px,2.2vh,19px); }

@media (max-width:820px){
  .spiegel{ margin:22px auto; padding:16px 14px; }
  .spiegel p{ font-size:18px; }
}

/* ── taalkeuze ── */
.taalkies{ display:flex; align-items:center; gap:7px; }
.taalkies button{ appearance:none; background:none; border:0; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; padding:3px 1px; line-height:1;
  color:rgba(232,206,152,.55); border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease; }
.taalkies button:hover{ color:var(--goudlicht); }
.taalkies button.aan{ color:var(--goudlicht); border-bottom-color:rgba(201,169,110,.7);
  cursor:default; }
.taalkies span{ font-size:9px; color:rgba(232,206,152,.3); }

/* in de zijbalk, vlak onder het merk */
.ztaal{ margin:0 0 18px; padding-left:2px; }

/* op het welkomstscherm linksboven, vlak onder de paneelteller. Rechtsboven
   staat de fasestrip al, daar zouden ze over elkaar heen vallen */
.dtaal{ position:absolute; top:46px; left:30px; z-index:6; }
/* paneel 2 en 3 zijn licht, daar moeten de knopjes donker meelezen */
.drempel.licht .dtaal button{ color:rgba(58,46,34,.5); }
.drempel.licht .dtaal button:hover,
.drempel.licht .dtaal button.aan{ color:var(--goudprint); }
.drempel.licht .dtaal button.aan{ border-bottom-color:rgba(154,123,46,.6); }
.drempel.licht .dtaal span{ color:rgba(58,46,34,.28); }

@media (max-width:820px){
  /* in de bovenbalk komt de taalkeuze naast de knoppen te staan */
  .ztaal{ order:3; margin:0 0 0 auto; }
  .dtaal{ top:38px; left:16px; }
}

/* ── zachte voet onder de panelen ──
   De pijlen liggen over de panelen heen. Zonder deze band loopt de tekst er
   dwars doorheen en lijkt hij afgekapt. Nu vervaagt hij netjes naar de rand,
   wat meteen laat zien dat er nog meer onder zit. */
.dvoetwaas{ position:fixed; left:0; right:0; bottom:0; height:146px;
  z-index:6; pointer-events:none; transition:opacity .35s ease;
  background:linear-gradient(to bottom,
    rgba(13,10,7,0) 0%, rgba(13,10,7,.72) 55%, rgba(13,10,7,.94) 100%); }
.drempel.licht .dvoetwaas{ background:linear-gradient(to bottom,
    rgba(250,246,239,0) 0%, rgba(250,246,239,.82) 52%, rgba(250,246,239,.97) 100%); }
/* op het laatste paneel is de poster geschaald en raakt niets de onderrand:
   daar mag de band weg zodat de voetregels leesbaar blijven */
.drempel.aanEinde .dvoetwaas{ opacity:0; }
@media (max-width:820px){ .dvoetwaas{ height:112px; } }

/* Het welkomstscherm mag zelf niet scrollen: elk paneel scrolt zichzelf al.
   Deed het dat wel, dan schoven de teller en de taalknopjes uit beeld en leek
   de onderste tekst afgekapt terwijl hij alleen buiten het scherm hing. */
.drempel{ overflow:hidden; }
.dteller, .dtaal, .dfases{ position:fixed; }

/* ══ fase 3: het kosmische ritme ══════════════════════════════════════ */

/* ── hoe het zich opbouwt ── */
.stroomvak{ margin:clamp(28px,4vw,46px) 0 clamp(24px,3.4vw,38px); }
.stroombalk{ display:flex; align-items:center; gap:clamp(14px,2.4vw,28px);
  margin-bottom:clamp(20px,3vw,34px); }
.stroombalk span{ font-family:'Inter',system-ui,sans-serif; font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--goudprint); white-space:nowrap; }
.stroombalk i{ flex:1; height:1px; background:rgba(154,123,46,.35); }
.stroomraster{ display:grid; grid-template-columns:1fr minmax(200px,268px);
  gap:clamp(24px,3.4vw,48px); align-items:start; }
.stroomkop{ font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(32px,4.4vw,50px); line-height:1.05; margin:0 0 6px; color:#1A1410; }
.stroomsub{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(17px,1.9vw,21px); color:#4A3B2C; margin:0 0 clamp(22px,3vw,34px); }
.stroomrij{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(4px,.8vw,10px); }
.stap5{ flex:1 1 0; text-align:center; min-width:0; }
.stap5 .cirkel{ display:grid; place-items:center; width:clamp(44px,4.4vw,58px);
  height:clamp(44px,4.4vw,58px); margin:0 auto clamp(12px,1.8vw,18px);
  border:1px solid rgba(154,123,46,.5); border-radius:50%;
  font-size:clamp(17px,1.9vw,22px); color:var(--goudprint); }
.stap5 b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--goudprint); margin-bottom:7px; }
.stap5 small{ display:block; font-family:'Cormorant Garamond',serif; font-size:clamp(15px,1.6vw,19px);
  color:#1A1410; margin-bottom:11px; }
.stap5 p{ margin:0; font-size:12.5px; line-height:1.6; color:#5A4A38;
  padding-top:11px; border-top:1px solid rgba(154,123,46,.22); }
.stroomrij .pijl{ flex:0 0 auto; align-self:flex-start;
  margin-top:clamp(20px,2.1vw,26px); color:var(--goudprint); font-size:14px; opacity:.7; }
.stroomzij{ border-left:1px solid rgba(154,123,46,.4); padding:2px 0 2px clamp(16px,2.2vw,26px); }
.stroomzij .stroomnoot{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(19px,2.2vw,26px); line-height:1.5; color:var(--goudprint); margin:0; }
.stroomzij em{ display:block; margin-top:clamp(16px,2.2vw,24px); padding-top:14px;
  border-top:1px solid rgba(154,123,46,.3); font-family:'Inter',system-ui,sans-serif;
  font-style:normal; font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:#7A6C5A; line-height:2; }

/* ── de kracht van de maan ── */
.maanvak{ margin:clamp(26px,3.6vw,44px) 0; }
.maanvak.metzij{ display:grid; grid-template-columns:1fr minmax(200px,300px);
  gap:clamp(20px,3vw,40px); align-items:start; }
.maankop{ display:flex; align-items:center; gap:clamp(14px,2.2vw,26px); margin-bottom:16px; }
.maankop h3, .maankop h2{ margin:0; font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(26px,3.4vw,40px); color:#1A1410; white-space:nowrap; }
.maankop i{ flex:1; height:1px; background:rgba(154,123,46,.35); }
.maankop em{ font-family:'Inter',system-ui,sans-serif; font-style:normal; font-size:9px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--goudprint); white-space:nowrap; }
.maanlead{ max-width:82ch; margin:0 0 clamp(22px,3vw,34px);
  font-size:14.5px; line-height:1.8; color:#4A3B2C; }
.maanrij2{ display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(6px,1vw,14px); }
.maanfase{ text-align:center; min-width:0; padding:0 2px;
  border-right:1px solid rgba(154,123,46,.2); }
.maanfase:last-child{ border-right:0; }
.maanfase img{ display:block; width:clamp(38px,4.4vw,58px); height:clamp(38px,4.4vw,58px);
  border-radius:50%; object-fit:cover; margin:0 auto 12px; }
.maanfase span{ display:block; font-family:'Cormorant Garamond',serif;
  font-size:clamp(13px,1.4vw,16px); color:#1A1410; line-height:1.25; }
.maanfase em{ display:block; margin-top:4px; font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:clamp(12px,1.2vw,14px); color:var(--goudprint); }
.maanfase u{ display:block; margin-top:10px; padding-top:10px; text-decoration:none;
  border-top:1px solid rgba(154,123,46,.22);
  font-size:11.5px; line-height:1.7; color:#5A4A38; }
.maanzij{ position:relative; overflow:hidden; min-height:240px;
  border:1px solid rgba(154,123,46,.28); }
.maanzij img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.maanzij > div{ position:relative; z-index:2; padding:clamp(18px,2.4vw,26px);
  background:linear-gradient(to right, rgba(250,246,239,.94) 40%, rgba(250,246,239,.5) 100%);
  height:100%; }
.maanzij b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-style:italic; font-size:clamp(19px,2.2vw,25px); line-height:1.35; color:#1A1410; }
.maanzij p{ margin:14px 0 0; font-size:13px; line-height:1.75; color:#4A3B2C; max-width:26ch; }

@media (max-width:1100px){
  .maanrij2{ grid-template-columns:repeat(4,1fr); row-gap:clamp(20px,3vw,30px); }
  .maanfase:nth-child(4n){ border-right:0; }
  .emorij{ grid-template-columns:repeat(3,1fr); }
  .emovakje:nth-child(3n){ border-right:0; }
  .emovakje:nth-child(n+4){ border-top:1px solid rgba(154,123,46,.2); }
}
@media (max-width:900px){
  .stroomraster, .maanvak.metzij, .emovak.metzij{ grid-template-columns:1fr; }
  .stroomzij{ border-left:0; border-top:1px solid rgba(154,123,46,.4);
    padding:clamp(16px,2.4vw,22px) 0 0; }
  .maanzij{ min-height:200px; }
}
@media (max-width:820px){
  .stroomrij{ flex-wrap:wrap; row-gap:26px; }
  .stap5{ flex:1 1 44%; }
  .stroomrij .pijl{ display:none; }
  .maanrij2{ grid-template-columns:repeat(2,1fr); }
  .maanfase{ border-right:0; padding-bottom:16px;
    border-bottom:1px solid rgba(154,123,46,.18); }
  .emokop{ grid-template-columns:1fr; gap:10px; }
  .emokop em{ padding-top:0; }
  .emorij{ grid-template-columns:1fr; }
  .emovakje{ border-right:0; border-top:1px solid rgba(154,123,46,.2); }
  .emovakje:first-child{ border-top:0; }
}

/* correcties op het kosmische ritme */
.maanvak .maankop h3, .maanvak .maankop h2{ text-transform:none; letter-spacing:0; font-variant:normal;
  color:#1A1410; }
.maanvak .maanlinks{ min-width:0; }
.maanvak .maanrij2{ gap:clamp(4px,.7vw,10px); }
.maanvak .maanfase{ padding:0 clamp(4px,.6vw,9px); border:0;
  border-right:1px solid rgba(154,123,46,.2); overflow-wrap:break-word; }
.maanvak .maanfase:last-child{ border-right:0; }
.stroomraster{ grid-template-columns:1fr minmax(220px,300px); }
.maanzij img{ filter:brightness(.92); }

/* de maanstrook loopt onder beide kolommen door */
.maanvak.metzij{ grid-template-rows:auto auto; align-items:start; }
.maanvak.metzij .maanlinks{ grid-column:1; grid-row:1; }
.maanvak.metzij .maanzij{ grid-column:2; grid-row:1; }
.maanvak.metzij .maanrij2{ grid-column:1 / -1; grid-row:2;
  margin-top:clamp(20px,2.8vw,34px); }
.maanvak .maanfase{ min-width:0; }
.maanvak .maanfase span{ margin-top:0; font-family:'Cormorant Garamond',serif;
  font-size:clamp(14px,1.5vw,17px); letter-spacing:0; color:#1A1410; }
.maanvak .maanfase.aan span{ color:#1A1410; }
.maanzij{ align-self:stretch; }
@media (max-width:900px){
  .maanvak.metzij .maanlinks, .maanvak.metzij .maanzij,
  .maanvak.metzij .maanrij2{ grid-column:1; grid-row:auto; }
}

/* de oude smalle maanstrook van fase 3 wordt de nieuwe brede strook */
#integratie .maanvak .maanrij2{ display:grid; grid-template-columns:repeat(8,1fr);
  gap:clamp(4px,.7vw,10px); align-items:start; }
#integratie .maanvak .maanfase{ flex:initial; min-width:0;
  padding:0 clamp(4px,.6vw,9px); border:0;
  border-right:1px solid rgba(154,123,46,.2); }
#integratie .maanvak .maanfase:last-child{ border-right:0; }
#integratie .maanvak .maanfase img{ width:clamp(38px,3.6vw,54px);
  height:clamp(38px,3.6vw,54px); margin:0 auto 12px; }
#integratie .maanvak .maanfase span{ margin-top:0; font-family:'Cormorant Garamond',serif;
  font-size:clamp(14px,1.4vw,17px); letter-spacing:0; color:#1A1410; }
#integratie .maanvak .maanfase em{ color:var(--goudprint); }
#integratie .maanvak .maanfase u{ color:#5A4A38; }
@media (max-width:1100px){
  #integratie .maanvak .maanrij2{ grid-template-columns:repeat(4,1fr);
    row-gap:clamp(20px,3vw,30px); }
  #integratie .maanvak .maanfase:nth-child(4n){ border-right:0; }
}
@media (max-width:820px){
  #integratie .maanvak .maanrij2{ grid-template-columns:repeat(2,1fr); }
  #integratie .maanvak .maanfase{ border-right:0; padding-bottom:16px;
    border-bottom:1px solid rgba(154,123,46,.18); }
}

/* mobiel: de zijkolommen onder de inhoud, niet ernaast.
   Deze regels staan bewust achteraan zodat ze de bredere varianten verslaan. */
@media (max-width:900px){
  .stroomraster{ grid-template-columns:1fr; }
  .stroomzij{ border-left:0; border-top:1px solid rgba(154,123,46,.4);
    padding:clamp(16px,2.4vw,22px) 0 0; margin-top:clamp(20px,3vw,28px); }
  .stroomzij .stroomnoot{ font-size:clamp(19px,2.6vw,24px); }
}
@media (max-width:820px){
  .stroomrij{ display:grid; grid-template-columns:repeat(2,1fr);
    gap:clamp(18px,4vw,26px); }
  .stroomrij .pijl{ display:none; }
  .stap5{ text-align:left; }
  .stap5 .cirkel{ margin:0 0 12px; }
  .stap5 p{ padding-top:9px; }
  .stroombalk{ flex-wrap:wrap; row-gap:8px; }
  .stroombalk i{ display:none; }
  .stroombalk span:last-child{ margin-left:auto; }
}
@media (max-width:520px){
  .stroomrij{ grid-template-columns:1fr; gap:22px; }
}

/* paneel 2 krijgt extra lucht onderaan, zodat de laatste regel nooit tegen de
   rand of tegen de knoppen aan komt te liggen */
.dp2 .dbinnen{ padding-bottom:clamp(120px,16vh,168px); }
.dp2 .donder{ margin-top:20px; }

/* ── van bewustwording naar jouw nieuwe werkelijkheid ──
   Vier ronde beelden op één gouden lijn, met een pijlbolletje tussen elk
   paar in. Onder ieder beeld een steeltje naar het statement. Rechts de
   mantra-kolom. Alles schaalt mee; de maten staan hierboven als variabele. */
.bwvak{ margin:clamp(30px,4.4vw,52px) 0;
  --bwgap:clamp(14px,2.4vw,38px);
  --bwrond:clamp(88px,10vw,158px); }
.bwraster{ display:grid; grid-template-columns:minmax(0,78fr) minmax(0,22fr);
  gap:clamp(24px,3.4vw,56px); align-items:stretch; }
.bwkop{ margin:0 0 6px; font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(30px,4vw,50px); line-height:1.06; color:#1A1410; }
.bwsub{ margin:0 0 clamp(26px,3.6vw,42px); font-family:'Cormorant Garamond',serif;
  font-style:italic; font-size:clamp(17px,1.9vw,22px); color:#4A3B2C; }

.bwrij{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--bwgap); row-gap:clamp(34px,5vw,54px); }
.bwstap{ position:relative; min-width:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; }
.bwfase{ font-family:'Inter',system-ui,sans-serif; font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--goudprint); opacity:.8; }
.bwnaam{ margin-top:5px; font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:#241C16; }

/* het ronde beeld, met de verbindingslijn en het pijltje erbij */
.bwbeeld{ position:relative; width:100%; margin:clamp(14px,2vw,26px) 0 0; }
.bwcirkel{ position:relative; z-index:1; display:grid; place-items:center;
  width:var(--bwrond); height:var(--bwrond); margin:0 auto; border-radius:50%; }
.bwcirkel img{ width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; }
.bwcirkel.leeg{ width:clamp(48px,4.6vw,62px); height:clamp(48px,4.6vw,62px);
  border:1px solid rgba(154,123,46,.55);
  font-size:clamp(17px,1.8vw,21px); color:var(--goudprint); }
.bwcirkel svg{ width:56%; height:56%; fill:none; stroke:#9A7B2E; stroke-width:1.6;
  stroke-linecap:round; }
.bwcirkel svg .vol{ fill:#9A7B2E; stroke:none; }
/* de doorlopende lijn loopt van hart naar hart, achter de cirkels langs */
.bwstap:not(:last-child) .bwbeeld::before{ content:""; position:absolute; z-index:0;
  top:50%; left:50%; width:calc(100% + var(--bwgap)); height:1px;
  background:rgba(154,123,46,.45); }
.bwpijl{ position:absolute; z-index:2; top:50%;
  left:calc(100% + (var(--bwgap) / 2)); transform:translate(-50%,-50%);
  width:clamp(18px,1.9vw,26px); height:clamp(18px,1.9vw,26px);
  display:grid; place-items:center; border:1px solid rgba(154,123,46,.5);
  border-radius:50%; background:#FAF6EF; color:var(--goudprint);
  font-style:normal; font-size:clamp(9px,.85vw,12px); line-height:1; }

/* het steeltje met bolletje onder de cirkel */
.bwsteel{ display:block; width:1px; height:clamp(16px,2vw,26px);
  margin-top:clamp(10px,1.4vw,18px);
  background:rgba(154,123,46,.5); position:relative; }
.bwsteel::after{ content:""; position:absolute; left:50%; bottom:-2px;
  width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#866B28; }

.bwzin{ margin:clamp(10px,1.4vw,16px) 0 0; font-family:'Cormorant Garamond',serif;
  font-weight:400; font-size:clamp(20px,2.4vw,29px); line-height:1.18; color:#1A1410; }
.bwzin em{ display:block; font-style:italic; }
.bwkort{ display:block; width:92%; margin-top:clamp(14px,2vw,22px); padding-top:clamp(12px,1.6vw,18px);
  border-top:1px solid rgba(154,123,46,.3);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(14px,1.5vw,17px); color:var(--goudprint); }
.bwtekst{ margin:clamp(9px,1.2vw,14px) 0 0; font-size:12.5px; line-height:1.72;
  color:#5A4A38; max-width:32ch; }
.bwvoet{ display:block; margin-top:clamp(14px,2vw,22px); font-family:'Inter',system-ui,sans-serif;
  font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--goudprint); }

/* op een breed scherm liggen de vier kolommen regel voor regel op dezelfde
   hoogte, ook als de ene tekst een regel langer is dan de andere */
@media (min-width:821px){
  @supports (grid-template-rows: subgrid){
    .bwrij{ grid-template-rows:repeat(8,auto); row-gap:0; }
    /* align-items stond op center voor de flex-variant; in het raster zou dat
       elke regel in zijn rij centreren en dan lopen de streepjes uiteen */
    .bwstap{ display:grid; grid-template-rows:subgrid; grid-row:span 8;
      justify-items:center; align-items:start; }
    .bwstap > .bwbeeld{ justify-self:stretch; }
    .bwstap > .bwkort{ justify-self:stretch; }
    .bwvoet{ align-self:end; }
  }
}

/* rechterkolom: de mantra, de onderregel en het merk */
.bwzij{ border-left:1px solid rgba(154,123,46,.4); align-self:stretch;
  padding:clamp(10px,1.6vw,18px) 0 2px clamp(18px,2.6vw,38px); }
.bwnoot{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(22px,2.7vw,34px); line-height:1.3; color:var(--goudprint); }
.bwzij em{ display:block; margin-top:clamp(18px,2.6vw,30px); padding-top:clamp(14px,2vw,22px);
  border-top:1px solid rgba(154,123,46,.35); font-family:'Inter',system-ui,sans-serif;
  font-style:normal; font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:#7A6C5A; line-height:2.1; }
.bwmerk{ margin-top:clamp(24px,3.6vw,52px); text-align:center; }
.bwmerk img{ display:block; width:clamp(68px,7.4vw,104px); margin:0 auto; opacity:.92; }
.bwmerk span{ display:block; margin-top:.9em; font-family:'Inter',system-ui,sans-serif;
  font-size:8.5px; letter-spacing:.26em; text-transform:uppercase; color:#7A6C5A; }

.bwslot{ display:flex; align-items:center; gap:clamp(14px,2.4vw,28px);
  margin-top:clamp(24px,3.4vw,40px); }
.bwslot i{ flex:1; height:1px; background:rgba(154,123,46,.3); }
.bwslot span{ font-family:'Inter',system-ui,sans-serif; font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--goudprint); white-space:nowrap; }
.bwbron{ margin:clamp(12px,1.6vw,18px) 0 0; text-align:center;
  font-size:11px; line-height:1.7; color:#7A6C5A; }

@media (max-width:1000px){
  .bwraster{ grid-template-columns:1fr; }
  .bwzij{ border-left:0; border-top:1px solid rgba(154,123,46,.4);
    padding:clamp(18px,2.6vw,26px) 0 0; margin-top:clamp(22px,3vw,30px);
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:clamp(18px,4vw,44px); }
  .bwnoot{ grid-column:1; grid-row:1; font-size:clamp(21px,3vw,28px); }
  .bwzij em{ grid-column:1; margin-top:clamp(14px,2vw,20px); }
  .bwmerk{ grid-column:2; grid-row:1 / span 2; margin:0; }
}
@media (max-width:820px){
  .bwrij{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(30px,6vw,44px); }
  .bwpijl{ display:none; }
  .bwstap:not(:last-child) .bwbeeld::before{ display:none; }
  .bwslot span{ white-space:normal; text-align:center; }
  .bwtekst{ max-width:34ch; }
}
@media (max-width:520px){
  .bwvak{ --bwrond:clamp(120px,40vw,168px); }
  .bwrij{ grid-template-columns:minmax(0,1fr); row-gap:clamp(42px,12vw,60px); }
  /* onder elkaar wordt de gouden lijn een rustig verticaal lijntje */
  .bwstap:not(:last-child)::after{ content:""; position:absolute; left:50%;
    bottom:calc(-1 * clamp(42px,12vw,60px)); width:1px; height:clamp(42px,12vw,60px);
    background:rgba(154,123,46,.45); }
  .bwkort{ max-width:240px; }
  .bwzij{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
  .bwmerk{ grid-column:1; grid-row:auto; margin-top:clamp(20px,6vw,30px); }
}

/* ══ wat je mag voelen ══════════════════════════════════════════════ */
.gvvak{ margin:clamp(30px,4.4vw,52px) 0; }
.gvboven{ display:grid; grid-template-columns:1fr minmax(300px,42%);
  gap:clamp(20px,3vw,40px); align-items:stretch; margin-bottom:clamp(26px,3.6vw,44px); }
.gvkop{ margin:0; font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(34px,5vw,62px); line-height:1.02; color:#1A1410; }
.gvkop em{ font-style:italic; color:var(--goudprint); }
.gvonderkop{ margin-top:clamp(8px,1.2vw,14px); font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(10px,1.1vw,12px); letter-spacing:.28em; text-transform:uppercase;
  color:var(--goudprint); }
.gvstreep{ display:block; width:56px; height:1px; background:rgba(154,123,46,.6);
  margin:clamp(14px,2vw,20px) 0; }
.gvstreep.licht{ background:rgba(255,253,250,.6); }
.gvlead{ margin:0; max-width:62ch; font-size:14.5px; line-height:1.8; color:#3A2E22; }
.gvbeeldtekst b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-style:italic; font-size:clamp(20px,2.4vw,30px); line-height:1.34; color:#FBF6EC; }
.gvbeeldtekst em{ display:block; font-family:'Inter',system-ui,sans-serif; font-style:normal;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(251,246,236,.9); }

/* de zes emoties */
.gvrij{ display:grid; grid-template-columns:repeat(6,1fr); }
.gvemo{ padding:0 clamp(10px,1.4vw,20px); text-align:center;
  border-left:1px solid rgba(154,123,46,.22);
  display:flex; flex-direction:column; align-items:center; }
.gvemo:first-child{ border-left:0; }
.gvbol{ display:block; width:clamp(58px,6vw,86px); height:clamp(58px,6vw,86px);
  border-radius:50%; overflow:hidden; position:relative;
  margin-bottom:clamp(14px,2vw,20px);
  background:linear-gradient(150deg,#C9A96E,#6E5B3E); }
.gvbol img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gvemo.t-vreugde .gvbol{ background:linear-gradient(160deg,#F0C87E,#B8823A); }
.gvemo.t-verdriet .gvbol{ background:linear-gradient(160deg,#C9C4BC,#7C7772); }
.gvemo.t-angst   .gvbol{ background:linear-gradient(160deg,#6E6A66,#26241F); }
.gvemo.t-boos    .gvbol{ background:linear-gradient(160deg,#B4644A,#5E2A1D); }
.gvemo.t-walging .gvbol{ background:linear-gradient(160deg,#D9C7A8,#8A7150); }
.gvemo.t-verbazing .gvbol{ background:linear-gradient(160deg,#4A5A78,#141826); }
.gvemo b{ font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:#1A1410; }
.gvnaam{ margin-top:6px; font-family:'Cormorant Garamond',serif;
  font-size:clamp(15px,1.6vw,18px); color:#3A2E22; }
.gvemo p{ width:100%; margin:clamp(12px,1.8vw,18px) 0 0;
  padding-top:clamp(12px,1.8vw,18px); border-top:1px solid rgba(154,123,46,.28);
  font-size:12.5px; line-height:1.7; color:#4A3B2C; }
.gvemo em{ width:100%; margin-top:auto; padding-top:clamp(14px,2vw,20px);
  border-top:1px solid rgba(154,123,46,.28);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(13px,1.4vw,15px); line-height:1.55; color:var(--goudprint); }

/* het slot: vak links, gedachte rechts */
.gvslot{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px);
  align-items:center; margin-top:clamp(26px,3.6vw,44px); }
.gvbox{ display:flex; align-items:center; gap:clamp(16px,2.2vw,26px);
  border:1px solid rgba(154,123,46,.4); padding:clamp(18px,2.4vw,26px); }
.gvteken{ flex:0 0 auto; width:clamp(38px,4vw,52px); color:var(--goudprint); }
.gvteken svg{ width:100%; height:auto; fill:none; stroke:#9A7B2E;
  stroke-width:1.4; stroke-linecap:round; }
.gvbox b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-style:italic; font-size:clamp(19px,2.2vw,26px); color:var(--goudprint); }
.gvbox em{ display:block; margin-top:9px; font-family:'Inter',system-ui,sans-serif;
  font-style:normal; font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:#7A6C5A; }
.gvslottekst p{ margin:0; font-family:'Cormorant Garamond',serif;
  font-size:clamp(17px,2vw,23px); line-height:1.5; color:#1A1410; }
.gvslottekst em{ display:block; margin-top:clamp(12px,1.8vw,18px);
  font-family:'Inter',system-ui,sans-serif; font-style:normal; font-size:9px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--goudprint); }
.gvvoet{ display:flex; align-items:center; gap:clamp(10px,1.8vw,22px);
  margin-top:clamp(24px,3.4vw,40px); }
.gvvoet i{ flex:1; height:1px; background:rgba(154,123,46,.3); }
.gvvoet u{ text-decoration:none; color:var(--goudprint); font-size:12px; }
.gvvoet span{ font-family:'Inter',system-ui,sans-serif; font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--goudprint); white-space:nowrap; }

@media (max-width:1100px){
  .gvrij{ grid-template-columns:repeat(3,1fr); row-gap:clamp(24px,4vw,34px); }
  .gvemo:nth-child(3n+1){ border-left:0; }
}
@media (max-width:900px){
  .gvboven{ grid-template-columns:1fr; }
  .gvslot{ grid-template-columns:1fr; }
  .gvvoet{ flex-wrap:wrap; row-gap:8px; }
  .gvvoet i{ display:none; }
  .gvvoet span{ white-space:normal; }
  .gvvoet u{ display:none; }
}
@media (max-width:620px){
  .gvrij{ grid-template-columns:repeat(2,1fr); }
  .gvemo{ border-left:0; }
  .gvemo:nth-child(2n){ border-left:1px solid rgba(154,123,46,.22); }
  .gvbox{ flex-direction:column; text-align:center; gap:14px; }
}

/* paneel 2 krimpt vanaf de bovenrand, zodat het blok nooit onder het scherm
   uit hangt. De verschuiving die journey.js meegeeft zet het weer in het midden. */
.dp2 .dbinnen{ transform-origin:top center; }
.dp2 .dbinnen{ padding-bottom:clamp(96px,12vh,132px); }

/* op een breed maar laag scherm mag de tekst breder lopen. Dat scheelt regels,
   waardoor het paneel veel minder hoeft te krimpen om te passen. */
@media (min-width:1000px) and (max-height:1150px){
  .dp2 .dbinnen{ max-width:900px; }
  .dp2 .dtekst{ max-width:66ch; }
  .dp2 .dbinnen{ padding-bottom:clamp(84px,10vh,110px); }
}

/* ── fase 3: rustiger maatvoering en uitlijning ──
   De koppen waren te groot voor de hoeveelheid tekst eromheen, en op smalle
   schermen liep alles uit elkaar. Hieronder staat de definitieve maatvoering. */

/* de vier standen */
.bwkop{ font-size:clamp(26px,3.2vw,40px); }
.bwsub{ font-size:clamp(15px,1.6vw,18px); margin-bottom:clamp(22px,3vw,34px); }
.bwzin{ font-size:clamp(17px,2vw,23px); }
.bwkort{ font-size:clamp(13px,1.35vw,15px); }
.bwtekst{ font-size:12px; line-height:1.75; }
.bwnoot{ font-size:clamp(20px,2.45vw,33px); }

/* de maan */
.maankop h3, .maankop h2{ font-size:clamp(23px,2.8vw,33px); }
.maanlead{ font-size:13.5px; line-height:1.85; max-width:76ch; }
.maanvak .maanfase span{ font-size:clamp(13px,1.25vw,15px); }
.maanfase em{ font-size:clamp(11.5px,1.1vw,13px); }
.maanfase u{ font-size:11px; line-height:1.75; }
.maanzij b{ font-size:clamp(17px,1.9vw,22px); }
.maanzij p{ font-size:12.5px; }

/* wat je mag voelen */
.gvkop{ font-size:clamp(30px,3.8vw,50px); }
.gvonderkop{ font-size:clamp(9.5px,1vw,11px); }
.gvlead{ font-size:13.5px; line-height:1.85; }
.gvbeeldtekst b{ font-size:clamp(18px,2vw,25px); }
.gvbol{ width:clamp(54px,5.2vw,74px); height:clamp(54px,5.2vw,74px); }
.gvemo b{ font-size:10px; }
.gvnaam{ font-size:clamp(14px,1.45vw,17px); }
.gvemo p{ font-size:12px; line-height:1.75; }
.gvemo em{ font-size:clamp(12.5px,1.3vw,14px); }
.gvbox b{ font-size:clamp(17px,1.9vw,23px); }
.gvslottekst p{ font-size:clamp(16px,1.8vw,21px); }

/* ── mobiel: niets mag meer buiten het scherm lopen ──
   Een aantal koppen en labels stond op nowrap zodat ze op een breed scherm
   netjes op één regel blijven. Op een telefoon mogen ze gewoon afbreken. */
@media (max-width:820px){
  .stroombalk, .maankop, .bwslot, .gvvoet, .emovoet, .vormenkop, .okop2{
    flex-wrap:wrap; row-gap:8px; }
  .stroombalk span, .maankop h3, .maankop em, .bwslot span, .gvvoet span,
  .stroomzij em, .bwzij em, .gvbeeldtekst em, .maanfase span, .maanfase em{
    white-space:normal; }
  .maankop{ display:block; }
  .maankop i{ display:none; }
  .maankop em{ display:block; margin-top:8px; }
  .gvvoet{ flex-direction:column; align-items:flex-start; gap:6px; }
  .gvvoet i, .gvvoet u{ display:none; }
  .bwslot i{ display:none; }
  .stroombalk i{ display:none; }
  .stroombalk span:last-child{ margin-left:auto; }
}
/* de volle-breedte hero van fase 3 mag naar buiten lopen, de rest niet */
#integratie .faseonder, #integratie .faseslot{ overflow-x:clip; }
@media (max-width:820px){
  .wegkop{ display:block; }
.wegkop h3, .wegkop h2, .wegkop em{ white-space:normal; }
  .wegkop span{ display:none; }
  .wegkop em{ display:block; margin-top:8px; }
}

/* ══ het beeld loopt door naar de rechterrand ══
   Eén doorlopende foto die rechtsboven begint en aan de linker- en onderkant
   in de achtergrond vervaagt. De tekst en de emoties liggen erbovenop. */
.gvvak{ position:relative; }
.gvfoto{ position:absolute; z-index:0; top:0; pointer-events:none;
  right:calc(-1 * clamp(22px,5vw,70px));
  width:min(52%, 860px); height:clamp(300px,38vw,560px); overflow:hidden; }
.gvfoto img{ width:100%; height:100%; object-fit:cover; object-position:64% 38%;
  display:block; }
.gvfoto i{ position:absolute; inset:0; display:block; background:
  linear-gradient(to right, #FAF6EF 0%, rgba(250,246,239,.94) 14%,
                            rgba(250,246,239,.58) 32%, rgba(250,246,239,.14) 56%,
                            rgba(250,246,239,0) 74%),
  linear-gradient(to bottom, rgba(250,246,239,0) 34%, rgba(250,246,239,.55) 64%,
                             rgba(250,246,239,.9) 86%, #FAF6EF 100%); }

.gvvak > .stroombalk, .gvboven, .gvrij, .gvslot, .gvvoet{ position:relative; z-index:2; }

/* de witte tekst staat nu direct op de foto, zonder kader */
.gvboven{ grid-template-columns:1fr minmax(260px,34%);
  gap:clamp(20px,3vw,44px); align-items:start;
  margin-bottom:clamp(20px,2.8vw,36px); }
.gvbeeldtekst{ padding-top:clamp(6px,1.2vw,16px); }
.gvbeeldtekst b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-style:italic; font-size:clamp(18px,2.1vw,27px); line-height:1.36; color:#FFFCF5;
  text-shadow:0 1px 14px rgba(24,18,12,.5); }
.gvbeeldtekst .gvstreep.licht{ background:rgba(255,252,245,.75); margin:clamp(14px,2vw,20px) 0; }
.gvbeeldtekst em{ display:block; font-family:'Inter',system-ui,sans-serif; font-style:normal;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:#FFFCF5;
  text-shadow:0 1px 10px rgba(24,18,12,.6); }

/* de emotierij loopt tot waar de foto begint, met een lijn ook aan de linkerkant */
.gvrij{ max-width:82%; }
.gvemo{ border-left:1px solid rgba(154,123,46,.28); }
.gvemo:first-child{ border-left:1px solid rgba(154,123,46,.28); }

@media (max-width:1250px){ .gvrij{ max-width:100%; } }
/* smal scherm: de foto wordt een gewone band bovenaan en de regel eronder
   leest in goud mee. Wit op een foto is op een telefoon te onrustig. */
@media (max-width:1000px){
  .gvvak{ display:flex; flex-direction:column; }
  .gvvak > .stroombalk{ order:1; }
  .gvvak .gvfoto{ order:2; position:relative; top:auto; right:auto;
    width:auto; height:clamp(170px,32vw,240px);
    margin:0 calc(-1 * clamp(22px,5vw,70px)) clamp(20px,3vw,28px); }
  .gvfoto i{ background:linear-gradient(to bottom,
      rgba(250,246,239,0) 55%, rgba(250,246,239,.35) 100%); }
  .gvboven{ order:3; grid-template-columns:1fr; gap:clamp(16px,3vw,24px); }
  .gvrij{ order:4; } .gvslot{ order:5; } .gvvoet{ order:6; }
  .gvbeeldtekst{ margin-top:0; padding:0; }
  .gvbeeldtekst b{ color:var(--goudprint); text-shadow:none;
    font-size:clamp(18px,4.6vw,23px); }
  .gvbeeldtekst em{ color:#7A6C5A; text-shadow:none; }
  .gvbeeldtekst .gvstreep.licht{ background:rgba(154,123,46,.5); margin:14px 0; }
}

/* de foto begint onder de balk, zodat "dit is integratie" leesbaar blijft */
.gvvak .gvfoto{ top:clamp(30px,3.6vw,52px); }
.gvvak > .stroombalk span{ text-shadow:0 1px 8px rgba(250,246,239,.9); }
/* de verschuiving onder de balk geldt alleen als de foto zweeft */
@media (max-width:1000px){ .gvvak .gvfoto{ top:auto; } }

/* ══ mobiel: een stap is een eigen scherm ═════════════════════════════
   Op een telefoon was een geopende stap vier tot vijf schermen scrollen
   binnen een pagina die zelf al zes schermen lang is. Je wist niet meer
   waar je was, en sluiten of doorgaan lag ver buiten beeld. Hieronder
   neemt de stap het scherm over: kop bovenin, knoppen onderin. */
body.stapopen{ overflow:hidden; }

@media (max-width:820px){
  .opaneel[data-open]{
    position:fixed; inset:0; z-index:70; margin:0; padding:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    background:#0D0A07; }
  #integratie .opaneel[data-open]{ background:#FAF6EF; }
  .opaneel[data-open] .okruimel{
    margin:0; border:0; border-radius:0;
    padding:58px clamp(16px,4.6vw,22px) 96px; min-height:100%; }

  /* de dunne voortgangsstreep helemaal bovenin */
  .ovoortgang{ position:fixed; top:0; left:0; right:0; z-index:3; height:2px;
    background:rgba(201,169,110,.18); }
  .ovoortgang i{ display:block; height:100%; background:var(--goudlicht);
    transform:scaleX(0); transform-origin:0 50%;
    transition:transform .12s linear; }
  #integratie .ovoortgang{ background:rgba(154,123,46,.16); }
  #integratie .ovoortgang i{ background:#866B28; }

  /* de kopbalk: waar ben ik, en weg hier */
  .opaneel[data-open] .okruim{
    position:fixed; top:2px; left:0; right:0; z-index:3;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:0; padding:11px clamp(14px,4vw,20px); border:0;
    background:rgba(13,10,7,.94); backdrop-filter:blur(9px);
    border-bottom:1px solid rgba(201,169,110,.22); }
  #integratie .opaneel[data-open] .okruim{
    background:rgba(250,246,239,.94); border-bottom-color:rgba(154,123,46,.25); }
  .opaneel[data-open] .opad{ display:none; }
  .okort{ display:none; }
  .opaneel[data-open] .okort{ display:block; font-family:'Inter',system-ui,sans-serif;
    font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--goudlicht); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; }
  #integratie .opaneel[data-open] .okort{ color:var(--goudprint); }
  .opaneel[data-open] .osluit{ flex:0 0 auto; margin:0; }

  /* de knoppen onderin, binnen duimbereik */
  .opaneel[data-open] .plnav{
    position:fixed; left:0; right:0; bottom:0; z-index:3;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
    margin:0; padding:10px clamp(12px,3.4vw,18px)
      calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(13,10,7,.94); backdrop-filter:blur(9px);
    border-top:1px solid rgba(201,169,110,.22); }
  #integratie .opaneel[data-open] .plnav{
    background:rgba(250,246,239,.94); border-top-color:rgba(154,123,46,.25); }
  .opaneel[data-open] .plnav .knop{
    flex:0 0 auto; min-width:0; padding:11px 15px; font-size:10px;
    letter-spacing:.12em; }
  .opaneel[data-open] .plmidden{ display:none; }
  .plteller{ display:none; }
  .opaneel[data-open] .plteller{ display:block; text-align:center;
    font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.2em;
    color:rgba(232,206,152,.75); }
  #integratie .opaneel[data-open] .plteller{ color:#7A6C5A; }

  /* binnenin mag alles de volle breedte pakken */
  .opaneel[data-open] .okop3{ margin-bottom:20px; }
  .opaneel[data-open] .okop3 h2{ font-size:clamp(28px,7.4vw,36px); }
  .opaneel[data-open] .okop3 blockquote{ margin-top:12px; }
}
/* de knoppen onderin houden het kort op een telefoon */
.plkort{ display:none; }
@media (max-width:820px){
  .opaneel[data-open] .plkort{ display:inline; }
  .opaneel[data-open] .pllang{ display:none; }
  .opaneel[data-open] .plteller{ white-space:nowrap; font-size:10px; letter-spacing:.14em; }
  .opaneel[data-open] .plnav .knop{ white-space:nowrap; padding:12px 18px; }
}
/* de korte kop en de teller horen alleen bij de mobiele stap */
.okort, .plteller{ display:none; }
@media (max-width:820px){
  .opaneel[data-open] .okort{ display:block; }
  .opaneel[data-open] .plteller{ display:block; }
}

/* ══ mobiel: de zijbalk klapt uit ═══════════════════════════════════
   De balk bovenin nam op een telefoon bijna een derde van het scherm.
   Nu blijft er een smalle balk staan met het merk, waar je bent en een
   knop. De rest komt eronder tevoorschijn als je erop tikt. */
.znu, .zmenu{ display:none; }
.vzw{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (max-width:820px){
  .zijbalk .zmerk{ order:-1; }
  .zijbalk{ position:sticky; top:0; z-index:40; flex-wrap:wrap; gap:12px;
    padding:11px clamp(14px,4vw,18px);
    background:rgba(13,10,7,.96); backdrop-filter:blur(10px); }
  body[data-fase="integratie"] .zijbalk{ background:rgba(13,10,7,.96); }

  .znu{ display:block; margin-left:auto; font-family:'Inter',system-ui,sans-serif;
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--goudlicht); white-space:nowrap; }

  .zmenu{ display:grid; gap:4px; align-content:center; justify-items:stretch;
    width:38px; height:34px; padding:8px 7px; margin:0;
    background:none; border:1px solid rgba(201,169,110,.35); cursor:pointer; }
  .zmenu i{ display:block; height:1px; background:var(--goudlicht);
    transition:transform .22s ease, opacity .18s ease; }
  body.menuopen .zmenu{ border-color:rgba(201,169,110,.7); }
  body.menuopen .zmenu i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
  body.menuopen .zmenu i:nth-child(2){ opacity:0; }
  body.menuopen .zmenu i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

}

/* ── fase 3: de kop stapelt op een telefoon ──
   De regel die tekst links en beeld rechts zet stond buiten elke media
   query, en overrulede daardoor de mobiele variant. Vandaar dat de tekst
   op een telefoon in een smalle kolom naast het beeld geperst werd. */
@media (max-width:900px){
  #integratie .hero{ grid-template-columns:1fr; }
  #integratie .hero .htekst{ order:1; padding:clamp(22px,5vw,30px) clamp(18px,5vw,26px)
    clamp(24px,5vw,32px); }
  #integratie .hero img{ order:0; margin-left:0; width:100%;
    min-height:clamp(180px,42vw,260px); height:auto; object-fit:cover;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.35) 88%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.35) 88%,rgba(0,0,0,0) 100%); }
  #integratie .hero .hkader{ max-width:none; }
}

/* ── iOS: reken met het zichtbare deel van het scherm ──
   Een vast geplaatst element is op iPhone zo hoog als het scherm zonder
   de balken van de browser. De onderkant van elk paneel viel daardoor
   achter de adresbalk, en de pagina dacht dat alles paste. */
.drempel{ height:100vh; height:100dvh; bottom:auto; }
@media (max-width:820px){
  .opaneel[data-open]{ height:100vh; height:100dvh; bottom:auto; }
}

/* ── paneel 3 op een telefoon compacter ──
   De drie fasekaarten waren samen bijna drie schermen hoog. Ze houden
   dezelfde inhoud, maar met minder lucht eromheen scheelt dat een scherm. */
@media (max-width:820px){
  .dfasen{ gap:10px; }
  .dfase{ padding-top:clamp(14px,2vh,20px); padding-bottom:0; }
.dfase h3, .dfase h2{ margin-bottom:4px; }
  .dkaartje{ padding:6px 8px 8px; }
  .dkaartje img{ height:26px; }
  .dkaartje b{ font-size:11.5px; }
  .dkaartje small{ font-size:8px; letter-spacing:.1em; line-height:1.5; }
  .drij{ padding:6px 8px; gap:8px; }
  .drij img{ height:26px; width:34px; }
  .duitgelicht{ padding:7px 8px; }
  .dband img{ height:clamp(40px,5.4vh,54px); }
  .dfaseslot{ margin:8px 0 3px; font-size:13px; }
  .dfaseres{ font-size:8px; }
  .dreisuitleg{ line-height:1.6; }
  .dreisvoet{ gap:8px; }
}
/* op een telefoon zijn de miniatuurtjes in de fasekaarten te klein om iets
   te tonen; de tekst draagt het daar. Dat scheelt bijna een heel scherm. */
@media (max-width:820px){
  .dkaartje img, .drij img, .duitgelicht img{ display:none; }
  .dkaartje{ padding:9px 10px; }
  .drij{ padding:8px 10px; }
}
/* zolang het welkomstscherm open staat hoort de zijbalk er niet overheen.
   De :has-regel leest de werkelijke staat van het scherm, de klasse is de
   terugval voor oudere browsers. */
body.drempelopen .zijbalk{ display:none; }
body:has(#drempel:not([hidden])) .zijbalk{ display:none; }
body:has(#drempel[hidden]) .zijbalk{ display:flex; }

/* ── de korte inspiratie bij een fase: audio of video ─────────────────── */
.hmedia{ display:inline-flex; align-items:center; gap:12px; margin-top:clamp(18px,2.4vw,26px);
  padding:11px 22px 11px 14px; border:1px solid rgba(201,169,110,.55); border-radius:999px;
  background:rgba(13,10,7,.42); color:#F3E7D2; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; transition:border-color .25s, background .25s; }
.hmedia:hover{ border-color:rgba(201,169,110,.9); background:rgba(13,10,7,.62); }
.hmedia i{ display:block; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(201,169,110,.7); position:relative; flex:0 0 auto; }
.hmedia i::after{ content:""; position:absolute; left:52%; top:50%;
  transform:translate(-50%,-50%); border-left:7px solid #C9A96E;
  border-top:5px solid transparent; border-bottom:5px solid transparent; }
.hmedia.speelt i::after{ border:0; width:7px; height:9px; margin-left:-1px;
  border-left:3px solid #C9A96E; border-right:3px solid #C9A96E; }
.hmedia u{ text-decoration:none; font-size:9px; letter-spacing:.16em;
  color:#C9A96E; opacity:.85; }
.hmedia.straks{ cursor:default; opacity:.62; }
.hmedia.straks:hover{ border-color:rgba(201,169,110,.55); background:rgba(13,10,7,.42); }
.hmediaspeler{ display:block; width:min(100%,420px); margin-top:14px; }
.hmediaspeler[hidden]{ display:none; }

/* ── printblok: één plek om te downloaden, drie formaten ──────────────── */
.pblok{ margin:clamp(26px,3.4vw,42px) 0; padding:clamp(20px,2.6vw,30px) clamp(18px,2.6vw,32px);
  border:1px solid rgba(154,123,46,.3); background:#FFFDFA; text-align:center; }
.pkop{ font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--goudprint); }
.ptekst{ margin:10px auto 0; max-width:60ch; font-size:13px; line-height:1.7; color:#5A4A38; }
.prij{ display:flex; gap:clamp(12px,1.6vw,20px); margin-top:clamp(18px,2.4vw,26px); }
.pknop{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  gap:7px; padding:clamp(16px,2vw,22px) 12px; text-decoration:none;
  border:1px solid rgba(154,123,46,.35); background:#FAF6EF; color:#241C16;
  transition:border-color .25s, background .25s, transform .25s; }
.pknop:hover{ border-color:rgba(154,123,46,.85); background:#FBF3E4; transform:translateY(-2px); }
.pknop svg{ width:20px; height:24px; fill:none; stroke:#9A7B2E; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round; }
.pknop b{ font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase; }
.pknop span{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:14px; color:#7A6A55; }
.pnoot{ margin:clamp(16px,2vw,22px) 0 0; font-size:11.5px; color:#7A6C5A; }

@media (max-width:760px){
  .prij{ flex-direction:column; }
  .pknop{ flex-direction:row; justify-content:flex-start; gap:12px; text-align:left; }
  .pknop span{ margin-left:auto; }
  .hmedia{ padding:10px 18px 10px 12px; font-size:9.5px; letter-spacing:.16em; }
}

/* De drie fasenamen staan al in de zijbalk, en boven de hero botsen ze met de
   tekst die in de foto zelf gedrukt staat. Alleen op het welkomstscherm laten
   we ze staan, daar is geen zijbalk. */
body:has(#drempel[hidden]) .zfases{ display:none; }

/* ══ letterwerk ═════════════════════════════════════════════════════════
   Twee dingen maken tekst rustig om te lezen. Ten eerste de regellengte:
   boven ongeveer zeventig tekens raak je bij het terugspringen de volgende
   regel kwijt. Ten tweede het afbreken: een laatste regel met één woord erop
   ziet er slordig uit. Hieronder staat de maat per soort tekst, en laten we
   de browser zelf het afbreken uitrekenen.
   Dit blok staat expres achteraan, zodat het de maatvoering hierboven wint. */

:where(.wrap p, .wrap li, .drempel p, .opaneel p){ text-wrap:pretty; }

/* koppen en korte regels altijd balanceren, ook op een telefoon */
h1, h2, h3, .hsub, .hvraag, .lead, .okop, .okort,
.spiegel p, .bwsub, .bwzin, .bwkop, .gvnaam, .stroomzij em,
.slottekst h3, .slottekst h2, .afsluiter{ text-wrap:balance; }

/* de langere leesteksten balanceren pas vanaf een tablet: op een telefoon
   wil je juist volle regels, anders wordt de kolom onnodig smal */
@media (min-width:560px){
  .faseslot p, .vormenlead, .maanlead, .gvlead, .bwtekst, .bwbron,
  .ptekst, .pnoot, .sub, .slottekst p, .bdtekst p, .vorm p,
  .weg .uitlijf, .tweeluik .tlinks p, .gvemo p{ text-wrap:balance; }
}

/* de maat van de lopende tekst */
.faseslot{ max-width:64ch; }
.tweeluik .tlinks p{ max-width:66ch; }
.sub.kalm{ max-width:58ch; }
.vormenlead{ max-width:64ch; }
.maanlead{ max-width:70ch; }
.gvlead{ max-width:64ch; }
.bwsub{ max-width:44ch; }
.bwbron{ max-width:74ch; margin-inline:auto; }
.ptekst{ max-width:58ch; margin-inline:auto; }
.bdtekst p{ max-width:52ch; }
.slottekst p{ max-width:58ch; }
.hintro{ max-width:52ch; }

/* leesgroottes meebewegen met het scherm, zonder ooit kleiner te worden
   dan wat er nu op een telefoon staat */
.sub{ font-size:clamp(14.5px,1.15vw,16.5px); }
.vormenlead{ font-size:clamp(15px,1.2vw,17.5px); }
.vorm p{ font-size:clamp(14px,1.1vw,16px); }
.weg .uitlijf{ font-size:clamp(15px,1.2vw,17px); }
.slottekst p{ font-size:clamp(15.5px,1.25vw,18px); }
.maanlead{ font-size:clamp(13.5px,1.1vw,16px); line-height:1.85; }
.gvlead{ font-size:clamp(13.5px,1.1vw,16px); line-height:1.85; }
.bwtekst{ font-size:clamp(12.5px,.95vw,14.5px); line-height:1.75; }
.ptekst{ font-size:clamp(13px,1.05vw,15px); }
.bwbron{ font-size:clamp(11px,.85vw,12.5px); }

/* op een telefoon mag alles wat op de brede versie naast elkaar stond
   gewoon over de volle breedte, en niets zwaarder wegen dan de leesbaarheid */
@media (max-width:560px){
  .faseslot, .tweeluik .tlinks p, .sub.kalm, .vormenlead, .maanlead,
  .gvlead, .bwsub, .bwbron, .ptekst, .bdtekst p, .slottekst p,
  .hintro{ max-width:none; }
}

/* Op een telefoon is er bovenaan het welkomstscherm geen ruimte voor de teller,
   de taalkeuze én de drie fasenamen naast elkaar; dan botsen ze met het label
   van het paneel. De namen komen even verderop toch weer terug. */
@media (max-width:820px){
  .dfases{ display:none; }
}

/* ══ fase 1: het kader als korte inspiratie ═════════════════════════════ */
.hkmedia b{ display:flex; align-items:center; gap:9px; }
.hkmedia b i{ display:block; width:20px; height:20px; flex:0 0 auto;
  border:1px solid rgba(201,169,110,.7); border-radius:50%; position:relative; }
.hkmedia b i::after{ content:""; position:absolute; left:53%; top:50%;
  transform:translate(-50%,-50%); border-left:6px solid #C9A96E;
  border-top:4px solid transparent; border-bottom:4px solid transparent; }
.hkmedia u{ text-decoration:none; margin-left:6px; font-size:8.5px;
  letter-spacing:.18em; opacity:.7; }
.hkmedia[data-media]{ cursor:pointer; transition:border-color .25s; }
.hkmedia[data-media]:hover{ border-color:rgba(201,169,110,.9); }
.hkmedia.straks{ opacity:.78; }

/* ══ het kleine kapitaal boven de kop van het kaartenoverzicht ══════════ */
.okoplbl{ font-family:'Inter',system-ui,sans-serif; font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--goudlicht); opacity:.85;
  margin:clamp(26px,3.4vw,44px) 0 10px; }
#helderheid .okoplbl, #integratie .okoplbl{ color:var(--goudprint); }
.okoplbl + .okop{ margin-top:0; }

/* ══ jouw reflectie ═════════════════════════════════════════════════════ */
.rvak{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px); margin:clamp(28px,3.6vw,46px) 0; align-items:stretch; }
.rlinks{ background:#FBF6EC; border:1px solid rgba(201,169,110,.35);
  padding:clamp(20px,2.6vw,32px); }
.rrechts{ border:1px solid rgba(201,169,110,.28);
  padding:clamp(20px,2.6vw,32px); display:flex; flex-direction:column; }
.rlbl{ display:block; font-family:'Inter',system-ui,sans-serif; font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--goudprint); }
.rrechts .rlbl{ color:var(--goudlicht); }
.rlinks h3, .rlinks h2{ margin:14px 0 0; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(23px,2.5vw,31px); line-height:1.15; color:#241C16; }
.rlead{ margin:12px 0 0; font-size:clamp(13px,1.05vw,15px); line-height:1.7;
  color:#4A3B2C; max-width:52ch; }
.rveld{ width:100%; margin-top:16px; padding:14px 15px; resize:vertical;
  min-height:96px; border:1px solid rgba(154,123,46,.35); background:#FFFDFA;
  color:#241C16; font-family:'Inter',system-ui,sans-serif; font-size:13.5px; line-height:1.7; }
.rveld::placeholder{ color:#A2917A; }
.rveld:focus{ outline:none; border-color:rgba(154,123,46,.85); }
.rknoppen{ display:flex; gap:12px; margin-top:14px; }
.rknoppen .knop{ flex:1 1 0; display:inline-flex; align-items:center;
  justify-content:center; gap:9px; }
.rknoppen .knop svg{ width:16px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.rknoppen .knop.gelukt{ background:#6E7F63; border-color:#6E7F63; color:#FBF6EC; }
.rnoot{ margin:12px 0 0; font-size:11.5px; color:#7A6C5A; }

.rgedaan{ list-style:none; margin:16px 0 0; padding:0; }
.rgedaan li{ display:flex; gap:11px; align-items:flex-start;
  margin-bottom:13px; font-size:clamp(12.5px,1vw,14px); line-height:1.6; }
.rgedaan i{ flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-size:11px;
  background:var(--goudlicht); color:#0D0A07; }
.rcitaat{ margin:auto 0 0; padding-top:clamp(16px,2.2vw,24px);
  border-top:1px solid rgba(201,169,110,.28);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(16px,1.6vw,20px); line-height:1.45; color:var(--goudlicht); }
#helderheid .rrechts .rlbl, #integratie .rrechts .rlbl{ color:var(--goudprint); }
#helderheid .rgedaan i, #integratie .rgedaan i{ background:#866B28; color:#FAF6EF; }
#helderheid .rcitaat, #integratie .rcitaat{ color:var(--goudprint); }

/* ══ de brede slotbalk van fase 1 ═══════════════════════════════════════ */
.slotbalk.breed{ display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(20px,3vw,44px); align-items:center;
  padding:clamp(20px,2.8vw,34px) clamp(20px,2.8vw,34px); }
.slotbeeld{ flex:0 0 auto; }
.slotbeeld img{ width:clamp(96px,10vw,148px); height:clamp(96px,10vw,148px);
  border-radius:50%; object-fit:cover; border:1px solid rgba(201,169,110,.5); }
.slotlbl{ display:block; font-family:'Inter',system-ui,sans-serif; font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--goudlicht); }
.slotbalk.breed h3, .slotbalk.breed h2{ margin:11px 0 0; font-family:'Cormorant Garamond',serif;
  font-weight:400; font-size:clamp(24px,2.7vw,34px); line-height:1.14; }
.slotbalk.breed h3 em, .slotbalk.breed h2 em{ font-style:italic; color:var(--goudlicht); }
.slotbalk.breed p{ margin:11px 0 0; max-width:56ch; }
.slotbalk.breed .knop{ margin-top:clamp(14px,1.8vw,20px); }
.slotnaast{ border-left:1px solid rgba(201,169,110,.3);
  padding-left:clamp(16px,2.2vw,28px); align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; }
.slotnaast ul{ list-style:none; margin:14px 0 0; padding:0; }
.slotnaast li{ display:flex; align-items:center; gap:12px; padding:9px 0;
  font-size:clamp(12.5px,1vw,14px); }
.slotnaast li i{ flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(201,169,110,.45); }
.slotnaast li svg{ width:15px; height:15px; fill:none; stroke:var(--goudlicht);
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.slotnaast li b{ font-weight:400; }
.slotnaast li u{ text-decoration:none; margin-left:auto; font-family:'Inter',system-ui,sans-serif;
  font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--goudlicht); opacity:.7; }
.slotnaast li.straks{ opacity:.62; }

/* ══ de stappenbalk onderaan ════════════════════════════════════════════ */
.sbalk{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:clamp(10px,1.6vw,24px); margin:clamp(26px,3.4vw,44px) 0 0;
  padding-top:clamp(20px,2.6vw,30px); border-top:1px solid rgba(201,169,110,.3);
  position:relative; }
.sstap{ text-align:center; position:relative; }
.sstap::before{ content:""; position:absolute; top:17px; left:50%;
  width:calc(100% + clamp(10px,1.6vw,24px)); height:1px;
  background:rgba(201,169,110,.3); z-index:0; }
.sstap:last-child::before{ display:none; }
.snr{ position:relative; z-index:1; display:grid; place-items:center;
  width:34px; height:34px; margin:0 auto 14px; border-radius:50%;
  border:1px solid rgba(201,169,110,.5); background:var(--nacht,#0D0A07);
  font-family:'Inter',system-ui,sans-serif; font-size:12px; color:var(--goudlicht); }
.sstap.hier .snr{ background:var(--goudlicht); border-color:var(--goudlicht);
  color:#0D0A07; }
.sstap b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:400;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; }
.sstap span{ display:block; margin-top:6px; font-family:'Cormorant Garamond',serif;
  font-size:clamp(13px,1.15vw,15.5px); color:rgba(246,240,231,.66); }
#helderheid .snr, #integratie .snr{ background:#FAF6EF; border-color:rgba(154,123,46,.5);
  color:var(--goudprint); }
#helderheid .sstap.hier .snr, #integratie .sstap.hier .snr{ background:#866B28;
  border-color:#9A7B2E; color:#FAF6EF; }
#helderheid .sstap span, #integratie .sstap span{ color:#6E675F; }
#helderheid .sstap::before, #integratie .sstap::before,
#helderheid .sbalk, #integratie .sbalk{ border-color:rgba(154,123,46,.3); }

@media (max-width:900px){
  .rvak{ grid-template-columns:minmax(0,1fr); }
  .slotbalk.breed{ grid-template-columns:auto minmax(0,1fr); }
  .slotnaast{ grid-column:1 / -1; border-left:0; padding-left:0;
    border-top:1px solid rgba(201,169,110,.3); padding-top:clamp(14px,2.4vw,20px);
    margin-top:clamp(4px,1vw,10px); }
}
@media (max-width:640px){
  .slotbalk.breed{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .slotbeeld img{ margin:0 auto; }
  .slotbalk.breed p{ margin-inline:auto; }
  .slotnaast li{ text-align:left; }
  .sbalk{ grid-auto-flow:row; gap:22px; }
  .sstap{ display:grid; grid-template-columns:34px 1fr; gap:0 14px;
    text-align:left; align-items:center; }
  .snr{ margin:0; grid-row:span 2; }
  .sstap::before{ display:none; }
  .rknoppen{ flex-direction:column; }
}

/* de knoppen in het reflectieblok staan op een licht vlak, ook in fase 1
   waar de knoppen normaal licht op donker zijn */
.rknoppen .knop.goud{ background:#866B28; border:1px solid #9A7B2E; color:#FFF8EC; }
.rknoppen .knop.goud:hover{ background:#886C27; }
.rknoppen .knop.licht{ background:#FFFDFA; border:1px solid rgba(154,123,46,.45);
  color:#4A3B2C; }
.rknoppen .knop.licht:hover{ border-color:rgba(154,123,46,.85); }

/* in fase 1 wijst het pijltje op de kaart vooruit, zoals in het ontwerp */
#herkenning .opijl{ width:26px; height:26px; font-size:0; }
#herkenning .opijl::after{ content:"\2192"; font-size:13px; line-height:1; }

/* de opname op de lichte panelen van het welkomstscherm */
.dlicht .hmedia, .dp1 .hmedia{ margin:clamp(14px,2vw,22px) auto 0; }
.dlicht .hmedia{ border-color:rgba(154,123,46,.5); background:#FFFDFA; color:#4A3B2C; }
.dlicht .hmedia:hover{ border-color:rgba(154,123,46,.9); background:#FBF3E4; }
.dlicht .hmedia i{ border-color:rgba(154,123,46,.6); }
.dlicht .hmedia i::after{ border-left-color:#9A7B2E; }
.dlicht .hmedia.speelt i::after{ border-left-color:#9A7B2E; border-right-color:#9A7B2E; }
.dlicht .hmedia u{ color:var(--goudprint); }
.hmediaspeler{ margin-inline:auto; }

/* Het eerste paneel kreeg er een opnameknop bij en paste daardoor net niet
   meer op een laag scherm. Alles een tandje strakker, en de video krijgt een
   maximum zodat hij nooit het hele paneel opeet. */
.dp1 .dvideo{ max-height:min(34vh, 300px); object-fit:cover;
  margin-bottom:clamp(14px,2.2vh,24px); }
.dp1 .dbinnen h1{ margin-bottom:clamp(10px,1.6vh,18px); }
.dp1 .dbinnen p{ margin-bottom:clamp(14px,2.2vh,26px); }
.dp1 .dbinnen em{ margin-top:clamp(16px,2.6vh,30px); }
.dp1 .dmerk img{ height:clamp(34px,4.6vh,52px); margin-bottom:clamp(10px,1.6vh,20px); }
.dp1 .druit{ margin:clamp(14px,2.4vh,27px) 0 clamp(8px,1.2vh,12px); }
.dp1 .dbinnen em{ margin-top:clamp(12px,2vh,24px); }
.dp1 .hmedia{ margin-top:clamp(6px,1.2vh,14px); }

/* op het derde paneel staan de fasekaarten met hun nummer boven de rand;
   de opnameknop krijgt daarom lucht eronder */
.dreis .hmedia{ margin-bottom:clamp(16px,3vh,30px); }

/* de stappenbalk is nu een rij knoppen */
.sstap{ appearance:none; background:none; border:0; padding:0; width:100%;
  color:inherit; font:inherit; cursor:pointer; }
.sstap:hover .snr{ border-color:var(--goudlicht); }
.sstap:hover b{ color:var(--goudlicht); }
.sstap.hier{ cursor:default; }
.sstap.dicht{ opacity:.45; }
.sstap.dicht .snr::after{ content:"\1F512"; position:absolute; font-size:9px;
  right:-4px; bottom:-4px; }
.sstap .snr{ position:relative; }
.sstap:focus-visible{ outline:2px solid var(--goud); outline-offset:4px; }
#helderheid .sstap:hover .snr, #integratie .sstap:hover .snr{ border-color:#9A7B2E; }
#helderheid .sstap:hover b, #integratie .sstap:hover b{ color:var(--goudprint); }

/* ══ de navigatie ═══════════════════════════════════════════════════════
   Drie gedaantes van dezelfde inhoud. Breed: de hele zijbalk. Tablet: een
   smalle strook met alleen tekens, die je open kunt klappen. Telefoon: een
   balkje bovenin met een menu dat over het scherm valt. */

.zijbalk{ width:var(--zijbreed,238px); padding:28px 20px; gap:0; }
.wrap{ margin-left:var(--zijbreed,238px); }
.zmerk{ margin-bottom:26px; }
.zmerk img{ height:40px; }
.zmerk b{ font-size:23px; }
.zmerk span{ font-size:7.5px; }

.zuit{ display:flex; flex-direction:column; flex:1; min-height:0; }

.ztaal{ margin-bottom:20px; }

/* een regel met een teken ervoor: dashboard, dagelijkse integratie, uitloggen */
.zdash, .zdag, .zuitlog{ display:flex; align-items:center; gap:12px;
  padding:9px 0; text-decoration:none; color:var(--ink3);
  font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.1em; }
.zdash:hover, .zdag:hover, .zuitlog:hover{ color:var(--goudlicht); }
.zteken{ flex:0 0 29px; height:29px; display:grid; place-items:center;
  font-style:normal; color:var(--goudlicht); font-size:13px; }
.zteken svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.zdash{ margin-bottom:6px; padding-bottom:16px;
  border-bottom:1px solid rgba(201,169,110,.16); }

.zfasekop{ margin:16px 0 14px; font-family:'Inter',system-ui,sans-serif; font-size:9px;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(232,206,152,.7); }

/* de rail met de stappen */
.fase button{ padding:9px 10px; border-radius:3px; margin-bottom:4px;
  transition:background .25s, color .25s; }
.fase button::before{ left:24px; top:38px; bottom:-4px; }
.fase button:hover{ background:rgba(201,169,110,.07); }
.fase button.aan{ background:rgba(201,169,110,.12);
  box-shadow:inset 0 0 0 1px rgba(201,169,110,.3); }
.fase button.aan i{ background:var(--goudlicht); border-color:var(--goudlicht);
  color:#100C08; }
.zstart{ margin-bottom:10px; }
.zstart .zteken{ border:1px solid rgba(201,169,110,.45); border-radius:50%;
  background:#0D0A07; }
.zstart::before{ display:none; }

.zdag{ margin-top:16px; padding-top:16px;
  border-top:1px solid rgba(201,169,110,.16); }

.zijbalk .zslot{ margin:20px 0 0; }

/* onderin: wie je bent */
.zaccount{ margin-top:auto; padding-top:16px;
  border-top:1px solid rgba(201,169,110,.16); }
.zprofiel{ display:flex; align-items:center; gap:11px; text-decoration:none;
  color:inherit; padding:6px 0; }
.zfoto{ flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:rgba(201,169,110,.18); border:1px solid rgba(201,169,110,.4);
  font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.06em;
  color:var(--goudlicht); }
.zfoto img{ width:100%; height:100%; object-fit:cover; }
.znaam b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:400;
  font-size:12px; color:#F0E6D4; }
.znaam small{ display:block; margin-top:2px; font-size:9.5px; letter-spacing:.1em;
  color:var(--ink3); }
.zprofiel:hover .znaam b{ color:var(--goudlicht); }
.zuitlog{ padding-top:10px; }

/* de knop die op een tablet de strook openklapt; elders onzichtbaar */
.zopen{ display:none; position:fixed; z-index:9; left:12px; top:18px;
  width:40px; height:40px; border:0; background:none; cursor:pointer;
  padding:0; }
.zopen i{ display:block; height:1px; margin:5px auto; width:18px;
  background:var(--goudlicht); transition:transform .25s, opacity .25s; }
body.zijopen .zopen i:nth-child(2){ transform:translateY(6px) rotate(45deg); }
body.zijopen .zopen i:nth-child(3){ opacity:0; }
body.zijopen .zopen i:nth-child(4){ transform:translateY(-6px) rotate(-45deg); }

/* ── tablet: een strook met tekens, die openklapt ─────────────────────── */
@media (min-width:821px) and (max-width:1180px){
  .zijbalk{ --zijbreed:74px; width:74px; padding:70px 10px 20px; align-items:center; }
  .wrap{ margin-left:74px; }
  .zopen{ display:block; }
  .zmerk{ margin-bottom:20px; }
  .zmerk img{ height:30px; margin-bottom:0; }
  .zmerk b, .zmerk span{ display:none; }
  .zuit{ align-items:center; width:100%; }
  .ztaal, .zfasekop, .zslot, .znaam,
  .zdash span, .zdag span, .zuitlog span,
  .fase button u, .fase button small{ display:none; }
  .zdash, .zdag, .zuitlog, .zprofiel{ justify-content:center; padding:9px 0; }
  .zdash{ border-bottom:0; margin-bottom:0; padding-bottom:9px; }
  .zdag{ border-top:1px solid rgba(201,169,110,.16); margin-top:10px; padding-top:14px; }
  .fase button{ justify-content:center; padding:8px 0; }
  .fase button::before{ left:50%; top:36px; bottom:-6px; transform:translateX(-.5px); }
  .fase button span{ display:none; }
  .zaccount{ border-top:1px solid rgba(201,169,110,.16); width:100%; }
  .zfoto{ margin:0 auto; }

  /* opengeklapt schuift de hele zijbalk over de inhoud heen */
  body.zijopen .zijbalk{ width:262px; padding:70px 20px 24px; align-items:stretch;
    box-shadow:24px 0 60px rgba(0,0,0,.45); }
  body.zijopen .zmerk img{ height:38px; margin-bottom:8px; }
  body.zijopen .zmerk b, body.zijopen .zmerk span,
  body.zijopen .ztaal, body.zijopen .zfasekop, body.zijopen .zslot,
  body.zijopen .znaam, body.zijopen .zdash span, body.zijopen .zdag span,
  body.zijopen .zuitlog span, body.zijopen .fase button u,
  body.zijopen .fase button small, body.zijopen .fase button span{ display:block; }
  body.zijopen .zuit{ align-items:stretch; }
  body.zijopen .zdash, body.zijopen .zdag,
  body.zijopen .zuitlog, body.zijopen .zprofiel{ justify-content:flex-start; }
  body.zijopen .zdash{ border-bottom:1px solid rgba(201,169,110,.16);
    margin-bottom:6px; padding-bottom:16px; }
  body.zijopen .fase button{ justify-content:flex-start; padding:9px 10px; }
  body.zijopen .fase button::before{ left:24px; transform:none; }
  body.zijopen .zfoto{ margin:0; }
}

/* de taalkeuze onder het logo op een breed scherm */
@media (min-width:821px){
  .zijbalk .ztaal{ justify-content:center; margin:0 0 18px; }
}

/* Op fase 2 loopt de zijbalk van donker naar licht. De regels onderin staan
   daardoor op een lichte grond en moeten mee verkleuren, net als de
   signatuur die dat al deed. */
body[data-fase="helderheid"] .zdag,
body[data-fase="helderheid"] .zuitlog,
body[data-fase="helderheid"] .znaam small{ color:#5A4A38; }
body[data-fase="helderheid"] .znaam b{ color:#2A2118; }
body[data-fase="helderheid"] .zdag .zteken,
body[data-fase="helderheid"] .zuitlog .zteken{ color:var(--goudprint); }
body[data-fase="helderheid"] .zfoto{ background:rgba(154,123,46,.16);
  border-color:rgba(154,123,46,.45); color:#6E5518; }
body[data-fase="helderheid"] .zaccount,
body[data-fase="helderheid"] .zdag{ border-color:rgba(154,123,46,.28); }
body[data-fase="helderheid"] .zdag:hover,
body[data-fase="helderheid"] .zuitlog:hover,
body[data-fase="helderheid"] .zprofiel:hover .znaam b{ color:var(--goudprint); }
@media (max-width:820px){
  body[data-fase="helderheid"] .zdag,
  body[data-fase="helderheid"] .zuitlog,
  body[data-fase="helderheid"] .znaam small{ color:var(--ink3); }
  body[data-fase="helderheid"] .znaam b{ color:#F0E6D4; }
  body[data-fase="helderheid"] .zfoto{ background:rgba(201,169,110,.18);
    border-color:rgba(201,169,110,.4); color:var(--goudlicht); }
}

/* De zijbalk liep op fase 2 mee met het verloop van de pagina, van donker naar
   licht. In de nieuwe navigatie staat er onderin een account en een uitlogregel,
   en die kwamen precies op de overgang terecht, waar geen enkele tekstkleur
   genoeg contrast heeft. De zijbalk blijft daarom overal donker; het verloop
   in de pagina zelf verandert niet. */
body[data-fase="helderheid"] .zijbalk,
body[data-fase="integratie"] .zijbalk{
  background:linear-gradient(180deg,#120E0A,#0A0705); }
body[data-fase="helderheid"] .zijbalk .terugd,
body[data-fase="helderheid"] .naar-start,
body[data-fase="helderheid"] .zdag,
body[data-fase="helderheid"] .zuitlog,
body[data-fase="helderheid"] .znaam small{ color:var(--ink3); }
body[data-fase="helderheid"] .zslot{ color:var(--goud); }
body[data-fase="helderheid"] .znaam b{ color:#F0E6D4; }
body[data-fase="helderheid"] .zdag .zteken,
body[data-fase="helderheid"] .zuitlog .zteken{ color:var(--goudlicht); }
body[data-fase="helderheid"] .zfoto{ background:rgba(201,169,110,.18);
  border-color:rgba(201,169,110,.4); color:var(--goudlicht); }
body[data-fase="helderheid"] .zaccount,
body[data-fase="helderheid"] .zdag{ border-color:rgba(201,169,110,.16); }
body[data-fase="helderheid"] .zdag:hover,
body[data-fase="helderheid"] .zuitlog:hover,
body[data-fase="helderheid"] .zprofiel:hover .znaam b{ color:var(--goudlicht); }

/* ── telefoon: de basisregels hierboven terugdraaien ──────────────────────
   De nieuwe zijbalkregels staan achteraan het bestand en wonnen daardoor van
   de mobiele regels die eerder staan. Hier zetten we ze weer recht. */
@media (max-width:820px){
  .zijbalk{ position:sticky; width:auto; padding:11px clamp(14px,4vw,18px);
    flex-direction:row; }
  .wrap{ margin-left:0; }
  .zuit{ display:none; flex:1 0 100%; }
  body.menuopen .zuit{ display:flex; }
  .zopen{ display:none; }
  .zmerk{ margin:0; }
  .zmerk img{ height:24px; }
  .zmerk b{ font-size:16px; }
  .zmerk span{ display:none; }
  .zijbalk .ztaal{ margin:0; }
}

/* ══ telefoon: balk bovenin, menu over het scherm ═══════════════════════
   Dit blok staat helemaal achteraan en is daarmee het laatste woord over de
   mobiele navigatie. Alles wat hierboven over de zijbalk gezegd wordt geldt
   voor een breder scherm. */
@media (max-width:820px){
  .zijbalk{ position:sticky; top:0; z-index:50; width:auto; height:auto;
    flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;
    padding:11px clamp(14px,4vw,18px);
    background:#0D0A07; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-right:0; border-bottom:1px solid rgba(201,169,110,.18); }
  /* geen backdrop-filter: dat maakt van de balk een ankerpunt voor alles wat
     position:fixed is, en dan past het menu zich aan de balk aan in plaats van
     aan het scherm */
  .wrap{ margin-left:0; }
  .zopen{ display:none; }

  .zijbalk .zmenu{ order:-2; margin:0; }
  .zijbalk .zmerk{ order:-1; flex:1 1 auto; text-align:center; margin:0; }
  .zijbalk .zmerk img{ display:inline-block; height:22px; margin:0; }
  .zijbalk .zmerk b{ display:block; font-size:15px; margin-top:1px; }
  .zijbalk .zmerk span{ display:none; }
  .zijbalk .ztaal{ order:0; margin:0; display:flex; gap:8px; flex:0 0 auto; }
  .zijbalk .znu{ display:none; }

  /* dicht */
  .zuit{ display:none; }

  /* open: een eigen scherm met dezelfde volgorde als de zijbalk */
  body.menuopen{ overflow:hidden; }
  /* de balk zelf blijft boven het menu staan, zodat de hamburger het kruisje
     wordt waarmee je het weer sluit */
  body.menuopen .zijbalk .zmenu,
  body.menuopen .zijbalk .zmerk,
  body.menuopen .zijbalk .ztaal{ position:relative; z-index:46; }
  body.menuopen .zuit{ display:flex; flex-direction:column; flex:none;
    position:fixed; left:0; right:0; top:0; bottom:0; z-index:45;
    overflow-y:auto; padding:70px clamp(18px,6vw,26px) 26px;
    background:linear-gradient(180deg,#120E0A,#0A0705); }
  body.menuopen .zuit .zdash{ display:flex; width:auto; margin:0 0 6px;
    padding:9px 0 16px; border:0;
    border-bottom:1px solid rgba(201,169,110,.16);
    font-size:11px; letter-spacing:.1em; }
  body.menuopen .zuit .zfasekop{ display:block; margin:14px 0 12px; }
  body.menuopen .zuit .fase{ display:block; margin:0; order:0; flex-basis:auto;
    border-top:0; padding-top:0; }
  body.menuopen .zuit .fase button{ display:flex; flex-direction:row;
    align-items:center; justify-content:flex-start; gap:12px; width:100%;
    padding:9px 10px; margin-bottom:4px; }
  body.menuopen .zuit .fase button::before{ display:block; left:24px;
    top:38px; bottom:-4px; }
  body.menuopen .zuit .fase button span{ display:block; text-align:left; }
  body.menuopen .zuit .fase button u{ display:block; }
  body.menuopen .zuit .fase button small{ display:block; }
  body.menuopen .zuit .zdag{ display:flex; margin-top:14px; padding-top:14px; }
  body.menuopen .zuit .zslot{ display:block; margin:18px 0 0; }
  body.menuopen .zuit .zaccount{ display:block; margin-top:auto;
    padding-top:16px; }
  body.menuopen .zuit .zprofiel{ display:flex; }
  body.menuopen .zuit .zuitlog{ display:flex; }

  /* dicht horen deze regels nergens te staan */
  .zijbalk .zdash, .zijbalk .zdag, .zijbalk .zaccount,
  .zijbalk .zuitlog, .zijbalk .zslot, .zijbalk .zfasekop,
  .zijbalk .fase{ display:none; }
}

/* ── de kleine letter onder elke fase en onder het welkomstscherm ──────── */
.disclaimer{ margin:clamp(14px,2vw,20px) 0 clamp(20px,3vw,30px);
  max-width:78ch; font-size:11px; line-height:1.7; color:rgba(246,240,231,.42);
  text-wrap:pretty; }
#helderheid .disclaimer, #integratie .disclaimer{ color:#767065; }
.dreisklein{ margin:clamp(12px,2vh,18px) auto 0; max-width:74ch;
  text-align:center; font-size:10px; line-height:1.6; color:rgba(58,46,34,.55); }
@media (max-width:820px){ .disclaimer{ font-size:10.5px; } }

/* ── de stappenbalk op een telefoon: klein maar wel naast elkaar ────────
   Onder elkaar viel het uit elkaar en was de lijn weg, terwijl juist die lijn
   laat zien dat het één beweging is. Dus dezelfde vorm als op een breed
   scherm, alleen compacter, en de ondertitel alleen bij de stap waar je bent. */
@media (max-width:640px){
  .sbalk{ grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
  /* een knop centreert zijn inhoud verticaal; met een ondertitel bij alleen de
     actieve stap zakken de andere nummers dan omlaag */
  .sstap{ display:flex; flex-direction:column; align-items:center;
    justify-content:flex-start; text-align:center; }
  .sstap::before{ display:block; top:14px;
    width:calc(100% + 6px); height:1px; }
  .snr{ width:28px; height:28px; margin:0 auto 9px; font-size:11px; grid-row:auto; }
  .sstap b{ font-size:8.5px; letter-spacing:.14em; }
  /* alleen de ondertitel verbergen, niet het nummer: dat is ook een span */
  .sstap > span:not(.snr){ display:none; }
  .sstap.hier > span:not(.snr){ display:block; margin-top:4px; font-size:11px; }
  .sstap.dicht .snr::after{ font-size:8px; right:-2px; bottom:-2px; }
}
@media (max-width:360px){
  .sstap b{ font-size:7.5px; letter-spacing:.1em; }
  .sstap.hier span{ font-size:10px; }
}

/* ── het welkomstscherm op een telefoon ────────────────────────────────
   Paneel 3 was op een telefoon meer dan drie schermen lang, waardoor je de
   drie fases pas na veel scrollen zag. De kaartjes en de beeldband per fase
   horen bij een breed scherm; op een telefoon blijft de kern staan. */
@media (max-width:640px){
  .dfase .dkaartjes, .dfase .dband, .dfase .duitgelicht,
  .dfase .drij{ display:none; }
  .dfase{ padding:20px 16px; }
.dfase h3, .dfase h2{ margin-top:4px; }
  .dfase .dfaseuit{ font-size:13px; line-height:1.6; }
  .dfasen{ gap:12px; }
  .dpijltje{ display:none; }
}

/* ── het tweede paneel op een telefoon ──────────────────────────────────
   De opname stond onder de tekst en viel daardoor buiten beeld. Hij staat nu
   boven de tekst: eerst luisteren, dan lezen. En de tekst zelf staat een
   tandje strakker, zodat er meer van het paneel in één beeld past. */
.dp2 .hmedia{ margin:clamp(14px,2.4vh,24px) auto clamp(4px,1vh,10px); }
@media (max-width:820px){
  .dp2 .dbinnen h1{ font-size:clamp(26px,7.4vw,34px); margin-bottom:clamp(10px,1.6vh,16px); }
  .dp2 .dtekst{ font-size:14.5px; line-height:1.7; }
  .dp2 .dtekst p{ margin-bottom:clamp(9px,1.4vh,14px); }
  .dp2 .dmerk img{ height:clamp(28px,4vh,40px); margin-bottom:clamp(8px,1.4vh,16px); }
  .dp2 .dmerk b{ font-size:19px; }
  .dp2 .dlabel{ margin-bottom:clamp(8px,1.2vh,12px); }
  .dp2 .dstreep{ margin:clamp(8px,1.2vh,14px) auto; }
  .dp2 .spiegel{ margin:clamp(14px,2.2vh,24px) auto; padding:clamp(12px,2vh,18px) 14px; }
  .dp2 .dknop{ margin-top:clamp(10px,1.6vh,18px); }
}

/* ── laten zien dat er meer onder zit ───────────────────────────────────
   De band onderaan liet het paneel afgerond lijken, terwijl er nog een halve
   pagina onder zat. Op een telefoon is die band nu lager en lichter, zodat de
   tekst zichtbaar doorloopt, en er staat een klein streepje bij zolang je nog
   niet onderaan bent. */
@media (max-width:820px){
  .dvoetwaas{ height:76px; }
  .drempel.licht .dvoetwaas{ background:linear-gradient(to bottom,
    rgba(250,246,239,0) 0%, rgba(250,246,239,.55) 58%, rgba(250,246,239,.9) 100%); }
  .dvoetwaas{ background:linear-gradient(to bottom,
    rgba(13,10,7,0) 0%, rgba(13,10,7,.5) 58%, rgba(13,10,7,.9) 100%); }

}


/* De knoppenrij onderaan lag over de tekst heen. Een paneel dat scrollt houdt
   nu ruimte vrij, zodat er niets onder de knoppen verdwijnt en het streepje
   dat zegt "er is meer" niet door een regel heen loopt. */
@media (max-width:820px){
  .dpaneel.scrollt .dbinnen{ padding-bottom:122px; }
}

/* ══ het welkomstscherm op een telefoon: drie gewone pagina's ═══════════
   Het schuivende spoor met zijn eigen vingerafhandeling bleef op telefoons
   hangen: de browser gaf het gebaar door aan ons, wij aan de browser, en
   soms aan niemand. Op een smal scherm is elk paneel daarom gewoon een
   pagina. Je ziet er één, hij scrollt zoals elke andere pagina, en de pijl
   onderin brengt je naar de volgende. Niets schuift, niets ligt in lagen. */
@media (max-width:820px){
  body.plat .dspoor{ display:block; width:100%; height:100%;
    transform:none !important; will-change:auto; touch-action:auto; cursor:auto; }
  body.plat .dpaneel{ display:none; width:100%; height:100%;
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    touch-action:pan-y; -webkit-overflow-scrolling:touch; }
  body.plat .dpaneel.aan{ display:block; }

  /* geen parallax meer, dus ook niets doorzichtig of verschoven */
  body.plat .dpaneel .dbinnen{ transform:none !important; opacity:1 !important; }

  /* de inhoud begint bovenaan en loopt door; onderaan blijft ruimte vrij
     voor de knoppenrij, zodat er geen regel onder verdwijnt */
  body.plat .dpaneel > .dbinnen{ min-height:100%; justify-content:flex-start;
    padding-bottom:126px; }

  /* het beeld van paneel 1 hoefde alleen groter dan het scherm te zijn omdat
     het meebewoog; nu staat het stil achter de tekst */
  body.plat .dp1 .dbg, body.plat .dp1 .dwaas{ position:fixed; inset:0;
    width:100%; height:100%; top:0; left:0; right:0; bottom:0; }

  /* er wordt niet meer gesleept, dus tekst mag je gewoon selecteren */
  body.plat .dpaneel h1, body.plat .dpaneel p, body.plat .dpaneel b,
  body.plat .dpaneel em, body.plat .dpaneel small{ user-select:auto; }
}

/* de enige knop in de balk hoort rechts te staan, niet links: vooruit is rechts */
@media (max-width:820px){
  body.plat .dpijlen .dpijl.volgende,
  body.plat .dpijlen .dpijl.starten{ margin-left:auto; }
}

/* de teller "1 / 3" liep bij het scrollen door de tekst heen; de maanstanden
   onderin zeggen hetzelfde, dus op een telefoon kan hij weg */
@media (max-width:820px){ body.plat .dteller{ display:none; } }

/* ══ het gouden plaatje dat zegt waar je bent ══════════════════════════
   Staat onder het logo en de merkregel, boven de taalkeuze: goud vlak met
   zwarte letters. In de reis staat er Handleiding, in het dashboard komt daar
   Dashboard te staan. Het is een label en geen knop, dus geen aanwijzer, geen
   hover en niets om op te klikken. */
.zgids{ display:none; align-items:center; justify-content:center; gap:8px;
  background:var(--goud); color:#0D0A07;
  border:1px solid var(--goud); border-radius:2px;
  font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase; text-align:center;
  cursor:default; user-select:none; }
.zgids .zteken{ flex:0 0 auto; width:15px; height:15px; color:#0D0A07; }
.zgids .zteken svg{ width:15px; height:15px; stroke-width:1.3; }
.zgids[hidden]{ display:none !important; }

/* breed scherm: een vol vlak onder het merk */
@media (min-width:1181px){
  .zijbalk .zgids{ display:flex; margin:0 0 16px; padding:10px 12px; }
}

/* tablet: in de smalle strook alleen het teken, opengeklapt het hele vlak */
@media (min-width:821px) and (max-width:1180px){
  .zijbalk .zgids{ display:flex; margin:0 auto 14px; padding:9px;
    width:38px; height:38px; }
  .zijbalk .zgids span{ display:none; }
  body.zijopen .zijbalk .zgids{ width:auto; height:auto; padding:10px 12px;
    margin:0 0 16px; }
  body.zijopen .zijbalk .zgids span{ display:block; }
}

/* telefoon: een klein gouden vierkantje in de balk, naast de taalkeuze */
@media (max-width:820px){
  .zijbalk .zgids{ display:flex; order:1; flex:0 0 auto; margin:0;
    width:30px; height:30px; padding:0; }
  .zijbalk .zgids span{ display:none; }
  .zijbalk .ztaal{ order:2; }
  /* het menu ligt over het scherm; het plaatje hoort erboven te blijven */
  body.menuopen .zijbalk .zgids{ position:relative; z-index:46; }
}

/* ══ toegankelijkheid, gemeten tegen WCAG 2.2 AA ════════════════════════
   Uit de meting van september 2026 kwamen drie dingen die niet haalden:
   het contrast van het goud op de lichte grond, tekst onder de elf pixels,
   en raakvlakken kleiner dan 24 bij 24. Hieronder staan ze alle drie recht.
   De donkere fases haalden hun contrast al ruim, die blijven zoals ze zijn. */

/* ── 1. het goud op de lichte grond ──
   #9A7B2E kwam uit op 3,72:1 tegen de crème achtergrond, terwijl 4,5:1 de
   eis is. Nét eronder, maar die kleur staat overal in fase 2 en 3. Een tint
   donkerder brengt hem op 4,70:1 en dat is met het blote oog nauwelijks een
   ander goud. */
:root{ --goudprint:#866B28; }

#helderheid .faseonder .laag, #helderheid .faseonder .plbl,
#helderheid .faseonder .vormlbl, #helderheid .faseonder .vormteken,
#helderheid .faseonder .vormhier, #helderheid .faseonder .vormenkop em,
#integratie .laag, #integratie .plbl, #integratie .vormlbl,
#integratie .vormteken, #integratie .vormhier, #integratie .vormenkop em,
#integratie .hlabel, #integratie .maanlbl, #integratie .bwlbl,
#integratie .okoplbl, #integratie .slotlbl, #integratie .rlbl,
.drempel.licht .dteller, .drempel.licht .dfases,
.dp2 .dlabel, .dreissub, .dfaselbl,
.vormvoor, .vormennoot, .gvkop em{ color:var(--goudprint); }

#helderheid .faseonder .vormenkop h2, #helderheid .faseonder .vormenkop h3,
#integratie .vormenkop h2, #integratie .vormenkop h3{ color:#1A1410; }

/* ── 2. een ondergrens voor de kleine letter ──
   De meting vond regels tot 7,5px. Korte hoofdlettertjes met veel
   letterruimte lezen groter dan ze zijn en houden tien pixels; alles wat een
   hele zin is gaat naar twaalf. */
.disclaimer, .dreisklein{ font-size:12px; line-height:1.75; }
@media (max-width:820px){ .disclaimer, .dreisklein{ font-size:12px; } }
.okoplbl, .rlbl, .slotlbl, .rnoot, .bwzin, .bwbron,
.dband span, .dkaartje small, .dreisvoet, .dfaseres,
.dvoet, .donder{ font-size:11px; }
.hlabel, .laag, .plbl, .vormlbl, .zfasekop, .dlabel, .dreissub,
.taalkies button, .znaam small, .vormvoor{ font-size:10px; }

/* ── 3. raakvlakken van minstens 24 bij 24 ──
   De taalknopjes waren 19 bij 17. Ze zien er hetzelfde uit, maar het
   aanraakvlak eromheen is nu groot genoeg. */
.taalkies button{ min-width:24px; min-height:24px; padding:4px 3px;
  display:inline-flex; align-items:center; justify-content:center; }

/* ── 4. een zichtbare focusring op het schrijfveld ──
   Dit veld had outline:none en was daarmee het enige punt in de reis waar je
   met het toetsenbord niet kon zien waar je stond. */
.rveld:focus-visible, .invoer textarea:focus-visible{
  outline:2px solid var(--goud); outline-offset:2px; }

/* ── de laatste zes uit de meting ──
   Stuk voor stuk net onder de 4,5:1. Allemaal dezelfde soort correctie: een
   tint donkerder, zonder dat het goud een andere kleur wordt. */
#helderheid .faseonder .knop.licht, #integratie .knop.licht,
#helderheid .faseonder .vorm .knop, #integratie .vorm .knop,
#helderheid .faseonder .slotknop span, #integratie .slotknop span,
#helderheid .snr, #integratie .snr{ color:var(--goudprint); }
#helderheid .faseonder .slotknop small, #integratie .slotknop small{ color:#767065; }

/* het scheidingsstipje tussen de talen is versiering en telt niet mee voor
   het lezen, maar het stond zo licht dat het ook als versiering wegviel */
.taalkies span{ color:rgba(232,206,152,.55); }
.drempel.licht .taalkies span{ color:rgba(58,46,34,.45); }
/* de taal waar je niet op staat mocht net iets donkerder */
.taalkies button{ color:rgba(232,206,152,.75); }
.drempel.licht .dtaal button{ color:rgba(58,46,34,.7); }

/* ── de laatste vier ──
   De kleine letter onder de fases stond op 42 procent dekking en kwam
   daarmee op 3,71:1. De regel rechtsboven op het reisoverzicht stond zo licht
   dat hij bijna versiering werd, terwijl er een zin staat. */
.disclaimer{ color:rgba(246,240,231,.72); }
#helderheid .disclaimer, #integratie .disclaimer{ color:#767065; }
.dreisrechts{ color:var(--goudprint); }
.dp1 .dvoet{ color:rgba(246,240,231,.85); text-shadow:0 1px 4px rgba(0,0,0,.9); }
/* versiering: het ruitje, het scheidingsstipje en de maanstanden dragen geen
   tekst, maar ze mogen wel zichtbaar zijn */
.druit{ color:rgba(232,206,152,.75); }
.taalkies span{ color:rgba(232,206,152,.7); }
.drempel.licht .taalkies span{ color:rgba(58,46,34,.6); }
.dstippen button{ color:rgba(201,169,110,.6); }
.drempel.licht .dstippen button{ color:rgba(154,123,46,.6); }

/* ── de ondergrens ook in de zijbalk en de kleine bijschriften ──
   Deze stonden op 7,5 tot 9,5 pixels. Het zijn korte hoofdlettertjes met veel
   letterruimte, dus tien pixels is genoeg en de verhoudingen blijven staan. */
.zmerk span, .zgids span, .fase button u, .spiegel b,
.hmedia u, .hkmedia u, .taalkies span{ font-size:10px; }

/* ══ Celestial Blue en Ember ═══════════════════════════════════════════
   Twee merkkleuren die in de reis nog nergens stonden. Ze blijven wat het
   merkblad zegt dat ze zijn: zeldzame accenten, samen minder dan een tiende
   van het beeld. Goud blijft het signaal, donker en crème blijven de bouw.

   Celestial Blue krijgt één betekenis en houdt die overal vast: de maan.
   De zon is goud, je richting en je wil. De maan is blauw, je gevoel en je
   ritme. Dat onderscheid stond al in de tekst en doet nu ook mee in de kleur.

   Op een donkere grond mag het merkblauw zoals het is; op de crème grond
   haalt hij als tekst maar 3,46:1 en gaat hij een tint dieper. */
:root{
  --blauw:#6F86A5;          /* Celestial Blue, zoals in het merkblad */
  --blauwdiep:#55698A;      /* dezelfde kleur, leesbaar op crème */
  --blauwlicht:#8698B4;     /* dezelfde kleur, ruim leesbaar op donker */
  --ember:#B85C32;          /* Ember, zoals in het merkblad */
  --emberdiep:#A5522C;      /* leesbaar als tekst op crème */
}

/* ── de maanfasestrook in fase 1 ── */
.maanfase.aan{ border-color:var(--blauw);
  box-shadow:0 0 26px rgba(111,134,165,.30); }
.maanfase.aan span{ color:#DCE5F0; }
.maanfase.aan::after{ background:var(--blauw); }
.maanvak{ border-color:rgba(111,134,165,.42); }
.maankop{ color:#CBD6E6; }
#helderheid .faseonder .maankop, #integratie .maankop{ color:var(--blauwdiep); }
.maanlead{ color:rgba(220,229,240,.82); }

/* ── de maanstanden onderin het welkomstscherm ── */
.dstippen button.aan{ color:var(--blauwlicht); }
.drempel.licht .dstippen button.aan{ color:var(--blauwdiep); }

/* ── het maankaartje op het reisoverzicht en in de fasekaarten ── */
.dkaartje img[src*="maan"] + b, .okaart[data-stap="3"] .okaartlbl{ color:var(--blauwdiep); }

/* ══ de kleuren krijgen een taak in de pagina's zelf ════════════════════
   Eén regel, overal hetzelfde, zodat het een systeem is en geen versiering:

     goud   = de blauwdruk. Het systeem, wat SZINN aanreikt.
     blauw  = jouw binnenwereld. De maan, en alles wat jíj invult.
     ember  = de wrijving. De Tikkun, en de kaders die een oordeel omkeren.

   Samen blijven ze onder de tien procent van het beeld, precies zoals het
   merkblad vraagt. Goud blijft het signaal en draagt nog steeds alles. */
:root{ --emberlicht:#C97046; }   /* Ember, leesbaar op de donkere fases */

/* ── wat jij invult: het reflectievak ──
   Dit is de enige plek in de hele reis waar de klant zelf schrijft in plaats
   van leest. Dat mag je zien. */
.rlbl{ color:var(--blauwdiep); }
.rrechts .rlbl{ color:var(--blauwlicht); }
.rlinks{ border-color:rgba(111,134,165,.34); }
.rrechts{ border-color:rgba(111,134,165,.28); }
.rveld{ border-color:rgba(111,134,165,.38); }
.rveld:focus, .rveld:focus-visible{ border-color:var(--blauwdiep);
  outline:2px solid var(--blauwdiep); outline-offset:2px; }
/* de bevestiging was een groen dat in geen enkel palet voorkwam */
.rknoppen .knop.gelukt{ background:var(--blauwdiep); border-color:var(--blauwdiep);
  color:#FBF6EC; }
.invoer textarea:focus{ border-color:rgba(111,134,165,.75); }

/* ── de wrijving: het herinneringskader ──
   Deze kaders keren een oordeel om dat iemand over zichzelf heeft. Dat is
   het scharnier van de hele reis, en dat verdient een eigen kleur. */
.herinnering{ border-color:rgba(184,92,50,.5);
  background:linear-gradient(120deg,rgba(184,92,50,.13),rgba(184,92,50,.04)); }
.hsymbool{ color:var(--emberlicht); }
.hlbl{ color:rgba(212,128,90,.9); }
#helderheid .faseonder .herinnering, #integratie .herinnering{
  border-color:rgba(165,82,44,.42);
  background:linear-gradient(120deg,rgba(165,82,44,.09),rgba(165,82,44,.03)); }
#helderheid .faseonder .hsymbool, #integratie .hsymbool{ color:var(--emberdiep); }
#helderheid .faseonder .hlbl, #integratie .hlbl{ color:var(--emberdiep); }
.plherinnering{ border-color:rgba(184,92,50,.45); }
.plherinnering em{ color:#F6DCCE; }

/* ══ het reisoverzicht: groter en op een telefoon beknopt ═══════════════
   Dit paneel was voor een breed scherm ontworpen, waar de drie fases naast
   elkaar passen. Op een telefoon stonden ze onder elkaar met hun hele uitleg
   eronder, wat er drie lappen tekst van maakte. De kern van dit paneel is niet
   de uitleg maar de belofte: drie fases, drie zinnen. Meer hoeft hier niet. */

/* ── de tekst boven de fases, op alle breedtes een maat groter ── */
.dreisuitleg{ font-size:15px; line-height:1.8; }
.dreissub{ font-size:10px; letter-spacing:.24em; }
.dfase h2, .dfase h3{ font-size:clamp(22px,3.1vh,28px); }
.dfasezin{ font-size:16px; }
.dfaseuit{ font-size:12.5px; line-height:1.7; }
.dfaselbl{ font-size:10px; }
.dfaseslot{ font-size:14.5px; }

@media (max-width:820px){
  .dp3 .dbinnen h1{ font-size:clamp(30px,8vw,40px); }
  .dreisuitleg{ font-size:15.5px; line-height:1.75; max-width:40ch;
    margin-left:auto; margin-right:auto; }
  .dreisrechts{ position:static; max-width:none; text-align:center;
    margin:0 auto clamp(8px,1.6vh,14px); font-size:16px; }

  /* de drie vlakken: een beeld, de naam van de fase, en de ene zin.
     De rest van de kaart hoort bij het brede scherm. */
  .dfasen{ flex-direction:column; gap:14px; }
  /* flex:1 1 0 hoort bij drie kolommen naast elkaar. Onder elkaar zou elke
     kaart daardoor een derde van de resthoogte pakken en zijn eigen inhoud
     platdrukken, dus hier groeit de kaart weer met wat erin staat. */
  .dfase{ flex:0 0 auto; padding:0 0 clamp(16px,2.6vh,22px); --zij:0px;
    overflow:hidden; border-radius:2px; }
  /* het beeld was op een smal scherm verborgen; hier is het juist de kern */
  .dfase .dband{ display:block; order:-1; margin:0 0 clamp(12px,2vh,18px); }
  .dfase .dband img{ height:clamp(96px,15vh,132px); }
  .dfase .dband span{ display:none; }
  .dfase .dband::after{ display:none; }
  .dfasenr{ position:static; transform:none; margin:0 auto clamp(6px,1.2vh,10px); }
  .dfaselbl, .dfase h2, .dfase h3, .dfasezin{ padding-left:16px; padding-right:16px;
    text-align:center; display:block; }
  .dfase h2, .dfase h3{ font-size:clamp(24px,6.6vw,30px); margin:0 0 6px; }
  .dfasezin{ font-size:clamp(16px,4.4vw,19px); margin:0; }
  /* alles wat uitleg is, blijft voor het brede scherm */
  .dfase .dfaseuit, .dfase .dfaseslot, .dfase .dfaseres,
  .dfase .dkaartjes, .dfase .drijen, .dfase .duitgelicht,
  .dfase .drij, .dpijltje{ display:none; }
}

/* ── de knop vooruit op het eerste paneel van het welkomstscherm ──
   Hij staat na de opname en voor het ruitje, zodat de volgorde luisteren,
   doorgaan is. Dezelfde vorm als de knop onderaan het reisoverzicht. */
.dverder{ display:inline-flex; align-items:center; justify-content:center; gap:14px;
  align-self:center; flex:0 0 auto; margin-top:clamp(18px,3vh,30px);
  background:#866B28; border:1px solid #866B28; color:#FFF8EC;
  font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase; padding:15px 34px;
  cursor:pointer; transition:background .2s, border-color .2s; }
.dverder i{ font-style:normal; }
.dverder:hover{ background:#7F6524; border-color:#7F6524; }
.dverder[hidden]{ display:none !important; }
@media (max-width:820px){
  .dverder{ margin-top:clamp(14px,2.4vh,22px); padding:14px 26px; font-size:11px; }
}

/* ── de stippen onder het welkomstscherm ──
   Ze waren 18px breed omdat het bolletje smaller tekent dan zijn tekengrootte.
   Een knop hoort minstens 24 bij 24 te zijn om er met een duim op te kunnen. */
.dstippen button{ min-width:24px; min-height:24px;
  display:inline-flex; align-items:center; justify-content:center; padding:0; }
.dstippen button{ color:rgba(201,169,110,.72); }
.drempel.licht .dstippen button{ color:rgba(154,123,46,.7); }

/* De knop vooruit leest nu even groot als de andere hoofdknoppen. */

/* ── het reisoverzicht: licht paneel, donkere kaarten ──
   Drie dingen liepen door elkaar. De regel rechtsboven kreeg later weer het
   lichte goud en stond daarmee op 2:1 op crème. De kleine letter onderaan is
   een disclaimer en erfde de kleur die voor een donker paneel bedoeld is,
   dus die was crème op crème: onzichtbaar. En het label Fase 1 en Fase 2
   staat op een bijna zwarte kaart, waar juist het lichte goud hoort. */
.dp3 .dreisrechts, .dreis .dreisrechts{ color:#866B28; }
.dp3 .dreisklein, .dreis .dreisklein{ color:rgba(58,46,34,.82); }
.df1 .dfaselbl, .df2 .dfaselbl{ color:rgba(232,206,152,.92); }
.df3 .dfaselbl{ color:#866B28; }

/* Het bijschrift op de beeldband van fase 3 ligt op een lichte zonsondergang.
   De sluier liep pas vanaf 30 procent op en was onderaan .78; op dat beeld
   bleef de tekst daardoor waterig. Iets eerder beginnen en iets dieper. */
.dband::after{ background:linear-gradient(180deg,rgba(8,6,4,0) 18%,rgba(8,6,4,.55) 62%,rgba(8,6,4,.9) 100%); }

/* ── de terugblik met beeld en een vinkje ─────────────────────────────
   De drie kaarten dragen het beeld van hun eigen fase, zodat je ze herkent
   van het reisoverzicht. Het vinkje eronder is voor jezelf: aftekenen wat
   je gehad hebt. Het ontgrendelt niets en verandert niets aan je voortgang. */
.vorm.metbeeld{ padding-top:0; overflow:hidden; }
.vormbeeld{ display:block; position:relative; margin:0 -22px 20px;
  height:132px; overflow:hidden; background:#1A1410; }
.vormbeeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.vormbeeld::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(26,20,16,0) 55%,rgba(26,20,16,.28) 100%); }
.vorm.metbeeld .vormteken{ margin-top:0; }
@media (max-width:900px){ .vormbeeld{ height:150px; } }
@media (max-width:600px){ .vormbeeld{ height:120px; } }

.vormvink{ margin-top:16px; align-self:flex-start; display:inline-flex;
  align-items:center; gap:11px; min-height:24px; padding:6px 0;
  background:none; border:0; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#6E5518; text-align:left; }
.vormvink i{ flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center;
  border:1px solid rgba(154,123,46,.55); border-radius:2px; background:#FFFDFA;
  font-style:normal; font-size:13px; line-height:1; color:transparent;
  transition:background .18s, border-color .18s, color .18s; }
.vormvink:hover i{ border-color:rgba(154,123,46,.9); }
.vormvink.aan i{ background:#866B28; border-color:#866B28; color:#FFF8EC; }
.vormvink.aan{ color:#866B28; }
.vormvink:focus-visible{ outline:2px solid #866B28; outline-offset:3px; }
/* op een donkere fase leest hetzelfde vinkje omgekeerd */
.scherm:not(#integratie) .vormvink{ color:var(--goudlicht); }
.scherm:not(#integratie) .vormvink i{ background:rgba(255,255,255,.04);
  border-color:rgba(201,169,110,.5); }
.scherm:not(#integratie) .vormvink.aan i{ background:var(--goudlicht);
  border-color:var(--goudlicht); color:#1A1410; }
/* met een vinkje ertussen mag maar één ding de rest naar beneden duwen,
   anders verdeelt de kaart de ruimte over twee plekken en valt hij uit elkaar */
.vormen.afvinkbaar .vormvink{ margin-top:auto; padding-top:16px; width:100%; align-self:stretch;
  border-top:1px solid rgba(154,123,46,.25); }
.vormen.afvinkbaar .vorm .knop,
.vormen.afvinkbaar .vormhier{ margin-top:14px; }
/* afvinkbare kaarten: geen los cijfer en geen dubbel 'je bent hier'; de voet
   (scheidingslijn, vinkje, knop) staat in alle drie de kaarten gelijk */
.vormen.afvinkbaar .vormteken, .vormen.afvinkbaar .vormvoor{ display:none; }
.vormen.afvinkbaar .vormlbl{ margin-top:0; }
.vormen.afvinkbaar .vormhier{ justify-content:center; padding:13px 16px; border:1px dashed rgba(154,123,46,.5);
  font-family:'Inter',system-ui,sans-serif; font-size:11.5px; letter-spacing:.18em;
  line-height:normal; text-align:center; cursor:default; }

/* ── de slotbalk aan het eind van een fase ────────────────────────────
   Er stond alleen een rond pijltje met een klein bijschrift. Dat is mooi,
   maar het is de enige weg vooruit en het las als versiering. Nu staat er
   een echte knop, met daarnaast een stille knop terug. */
.slotknoppen{ display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  gap:10px; padding:20px clamp(18px,3vw,32px); width:max-content; max-width:280px; }
.slotknoppen .knop{ flex:0 0 auto; min-width:0; display:inline-flex; align-items:center;
  justify-content:center; gap:10px; padding:15px 24px; font-size:11px; letter-spacing:.18em; }
.slotknoppen .knop i{ font-style:normal; }
.slotvooruit{ background:#866B28; color:#FFF8EC; border:1px solid #866B28; }
.slotvooruit:hover{ background:#7F6524; border-color:#7F6524; }
/* de stille knop terug staat standaard op een donkere balk; de twee balken
   die op een crème vlak liggen krijgen hem donker, zelfde regel als hun kop */
.slotterug{ background:none; color:var(--goudlicht);
  border:1px solid rgba(201,169,110,.5); }
.slotterug:hover{ border-color:rgba(201,169,110,.9); }
#integratie .slotbalk .slotterug,
#helderheid .faseonder .slotbalk .slotterug{ color:#6E5518;
  border-color:rgba(154,123,46,.5); }
#integratie .slotbalk .slotterug:hover,
#helderheid .faseonder .slotbalk .slotterug:hover{ border-color:rgba(154,123,46,.9); }
@media (max-width:900px){
  .slotknoppen{ width:auto; max-width:none; padding:0 clamp(16px,4vw,24px) 22px; }
}

/* ── de hoeken van het welkomstscherm ─────────────────────────────────
   De teller (1 / 2) linksboven en de rij fasenamen rechtsboven zijn weg.
   In de hoeken staat nu alleen de taalkeuze, en die schuift op naar de plek
   waar de teller stond. Waar je bent lees je aan de stippen aan de zijkant. */
.dtaal{ top:24px; }
@media (max-width:820px){ .dtaal{ top:20px; } }

/* De knop vooruit stond op .dverder, maar .dbinnen .knop is specifieker en won,
   dus hij bleef de stille omlijnde vorm van de andere knoppen op dat paneel.
   Hij hoort juist op te vallen: hij is de weg vooruit. */
.dbinnen .dverder{ background:#866B28; border-color:#866B28; color:#FFF8EC; }
.dbinnen .dverder:hover{ background:#7F6524; border-color:#7F6524; }

/* ══ DE NAVIGATIE ═══════════════════════════════════════════════════════
   Eén zijbalk voor drie plekken: het dashboard, de blauwdruk en deze
   handleiding. Alles is overal hetzelfde behalve het gekleurde blok dat
   zegt waar je bent, en wat daaronder staat: hier je reis, elders het menu.
   Dit blok staat achteraan en overschrijft bewust de oudere zijbalkregels. */

@media (min-width:821px){
  .zijbalk{ width:236px; padding:26px 18px 22px; gap:0;
    background:#0D0A07; border-right:1px solid rgba(201,169,110,.14);
    overflow-y:auto; overscroll-behavior:contain; }
}
.zijbalk::-webkit-scrollbar{ width:6px; }
.zijbalk::-webkit-scrollbar-thumb{ background:rgba(201,169,110,.22); border-radius:3px; }

.zmerk{ margin-bottom:20px; }
.zmerk img{ height:42px; }
.zmerk b{ font-size:23px; letter-spacing:.3em; text-indent:.3em; }
#z-merkonder{ margin-top:7px; font-size:8px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--goudlicht); }

.zuit{ display:flex; flex-direction:column; }

/* ── jouw dagdeel ─────────────────────────────────────────────────────
   Drie standen van de dag. In de handleiding staat hij er wel maar stuurt
   hij niets aan: hij hoort bij de dagelijkse integratie in het dashboard. */
.zdagdeel{ border:1px solid rgba(201,169,110,.3); padding:11px 8px 9px;
  margin-bottom:14px; }
.zdagkop{ display:block; text-align:center; font-family:'Inter',system-ui,sans-serif;
  font-size:8px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--goudlicht); margin-bottom:9px; }
.zdagknoppen{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.zdagknop{ display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 2px 7px; min-height:44px; background:none; border:0; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:7.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(232,206,152,.72);
  transition:background .18s, color .18s; }
.zdagknop i{ font-style:normal; font-size:13px; line-height:1; color:var(--goudlicht); }
.zdagknop:hover{ color:#F6F0E7; }
.zdagknop.aan{ background:rgba(201,169,110,.13); color:#FBF3E0;
  border-radius:2px; }
.zdagknop:focus-visible{ outline:2px solid var(--goudlicht); outline-offset:1px; }

/* ── waar je bent ─────────────────────────────────────────────────────
   Geen knop: je staat er al, dus er valt niets te klikken. De kleur zegt
   welke van de drie plekken het is. */
.zplek{ display:flex; align-items:center; gap:12px; margin-bottom:20px;
  padding:14px 15px; border-radius:2px; cursor:default;
  font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; }
.zplek .zteken{ flex:0 0 21px; height:21px; display:grid; place-items:center; }
.zplek svg{ width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.zplek.op-goud{ background:#E5CE9C; border:1px solid #E5CE9C; color:#241C13; }
.zplek.op-blauw{ background:#6F86A5; border:1px solid #6F86A5; color:#FFFDF8; }
.zplek.op-ember{ background:#B85C32; border:1px solid #B85C32; color:#FFF6EF; }

/* ── het menu op de andere twee plekken ──────────────────────────────── */
.zmenulijst{ display:flex; flex-direction:column; gap:2px; }
.zmenuitem{ display:flex; align-items:center; gap:13px; padding:9px 6px;
  min-height:38px; text-decoration:none; border-radius:2px;
  font-family:'Inter',system-ui,sans-serif; font-size:12.5px; color:rgba(246,240,231,.86);
  transition:background .18s, color .18s; }
.zmenuitem .zteken{ flex:0 0 22px; height:22px; display:grid; place-items:center; }
.zmenuitem svg{ width:20px; height:20px; fill:none; stroke:var(--goudlicht);
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.zmenuitem:hover{ background:rgba(201,169,110,.1); color:#FBF6EC; }
.zmenuitem:focus-visible{ outline:2px solid var(--goudlicht); outline-offset:1px; }

/* ── jouw reis ────────────────────────────────────────────────────────
   De vier stappen met de lijn ertussen. De stap waar je nu bent krijgt
   een eigen vlak, zodat je hem in één oogopslag terugvindt. */
.zfasekop{ margin:0 0 12px 2px; }
.fase{ display:flex; flex-direction:column; gap:0; }
.zijbalk .fase button{ position:relative; gap:13px; padding:7px 8px; border-radius:2px;
  min-height:44px; }
.zijbalk .fase button::before{ left:22px; top:38px; bottom:-1px;
  border-left:1px solid rgba(201,169,110,.32); }
.zijbalk .fase button i{ flex:0 0 30px; height:30px; z-index:1;
  background:#0D0A07; border:1px solid rgba(201,169,110,.5);
  font-family:'Cormorant Garamond',serif; font-size:13px; color:var(--goudlicht); }
.zijbalk .fase button svg{ width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.zijbalk .fase button u{ font-size:9.5px; letter-spacing:.2em; }
.zijbalk .fase button small{ font-family:'Cormorant Garamond',serif;
  font-size:13px; letter-spacing:0; text-transform:none; opacity:.8; margin-top:1px; }
.zijbalk .fase button.aan{ background:rgba(255,255,255,.045);
  border:1px solid rgba(201,169,110,.28); padding:7px 8px; }
.zijbalk .fase button.aan i{ background:#E5CE9C; border-color:#E5CE9C; color:#241C13; }
.zijbalk .fase button.aan u{ color:#FBF3E0; }
.zijbalk .fase button.aan small{ opacity:1; color:#F6F0E7; }
.zijbalk .fase button:focus-visible{ outline:2px solid var(--goudlicht); outline-offset:1px; }

/* ── het citaat, het account en de slotregel ─────────────────────────── */
.zscheider{ height:1px; background:rgba(201,169,110,.18); margin:20px 0; }
.zcitaat{ margin:0; }
.zcitaat p{ margin:0; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:15px; line-height:1.55; color:rgba(246,240,231,.9); }
.zcitaat cite{ display:block; margin-top:9px; font-family:'Inter',system-ui,sans-serif;
  font-style:normal; font-size:8px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--goudlicht); }

.zaccount{ display:block; }
.zprofiel{ display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:2px; border-radius:2px; }
.zfoto{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:rgba(201,169,110,.16);
  border:1px solid rgba(201,169,110,.55);
  font-family:'Inter',system-ui,sans-serif; font-size:12px; letter-spacing:.08em;
  color:var(--goudlicht); }
.zfoto img{ width:100%; height:100%; object-fit:cover; }
.znaam b{ display:block; font-family:'Inter',system-ui,sans-serif; font-weight:500;
  font-size:13.5px; color:#F6F0E7; }
.znaam small{ display:block; margin-top:2px; font-size:11.5px;
  color:rgba(246,240,231,.55); }
.zprofiel:hover .znaam b{ color:#FBF6EC; }
.zuitlog{ display:inline-flex; align-items:center; gap:9px; margin-top:12px;
  padding:6px 4px; min-height:24px; text-decoration:none;
  font-family:'Inter',system-ui,sans-serif; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(232,206,152,.75); }
.zuitlog svg{ width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.zuitlog:hover{ color:#F6F0E7; }

.zmerkregel{ display:block; font-family:'Inter',system-ui,sans-serif; font-style:normal;
  font-size:8.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,206,152,.6); }

/* de zijbalk blijft donker, ook als fase 2 met haar verloop openstaat:
   in het ontwerp is de navigatie één rustig vlak naast de pagina */
body[data-fase="helderheid"] .zijbalk{ background:#0D0A07; }
body[data-fase="helderheid"] .zijbalk .zmerkregel{ color:rgba(232,206,152,.6); }

/* De oude zijbalk duwde het account naar beneden met margin-top:auto; in de
   nieuwe opzet staat alles onder elkaar met scheidingslijnen ertussen. */
.zijbalk .zaccount{ margin-top:0; }
/* het teken in het gekleurde blok moet de kleur van dat blok volgen */
.zplek .zteken svg{ width:21px; height:21px; fill:none !important;
  stroke:currentColor !important; stroke-width:1.3; }
.zplek .zteken{ color:inherit; }

/* Het dagdeel is uit de reis gehaald: hij hoort bij de dagelijkse integratie
   in het dashboard. De taalkeuze staat nu onder het blok dat zegt waar je
   bent, gecentreerd, zodat de kop één rustig blok is. */
.zdagdeel{ display:none !important; }
.zplek{ justify-content:flex-start; margin-bottom:14px; padding:15px 16px; }
.zijbalk .ztaal{ position:static; display:flex; justify-content:center;
  margin:0 0 20px; padding:0; }
.zijbalk .ztaal button{ min-width:24px; min-height:24px; }

/* icoon en tekst staan als één groep in het midden van het gekleurde blok */
.zplek{ justify-content:center; gap:13px; }

/* Buiten de handleiding staat het menu in plaats van de reis. De oude
   zijbalkregels zetten .fase hard op display:flex, dus hidden werd genegeerd. */
.zijbalk .fase[hidden], .zijbalk .zmenulijst[hidden],
.zijbalk .zfasekop[hidden], .zijbalk .zcitaat[hidden],
.zijbalk .zaccount[hidden], .zijbalk .zplek[hidden]{ display:none !important; }

/* ── de navigatie op een telefoon ─────────────────────────────────────
   Bovenin een smalle balk: het merk, waar je bent, de taalkeuze en de knop
   die de rest uitklapt. Uitgeklapt staat alles in dezelfde volgorde als in
   de brede zijbalk, zodat het één navigatie blijft. */
@media (max-width:820px){
  .zijbalk .zplek{ order:0; margin:0; padding:8px 12px; gap:8px;
    font-size:8.5px; letter-spacing:.16em; flex:0 0 auto; }
  .zijbalk .zplek .zteken{ flex:0 0 15px; height:15px; }
  .zijbalk .zplek svg{ width:15px; height:15px; }
  .zijbalk .zscheider, .zijbalk .zcitaat,
  .zijbalk .zmerkregel, .zijbalk .zmenulijst{ display:none; }

  body.menuopen .zuit .zplek{ display:none; }
  body.menuopen .zuit .zmenulijst{ display:flex; margin:4px 0 0; }
  body.menuopen .zuit .zscheider{ display:block; margin:18px 0; }
  body.menuopen .zuit .zcitaat{ display:block; }
  body.menuopen .zuit .zmerkregel{ display:block; margin:0; }
  body.menuopen .zuit .zaccount{ margin-top:0; }
  body.menuopen .zijbalk .zplek{ position:relative; z-index:46; }
}
@media (max-width:480px){
  .zijbalk .zplek span:last-child{ font-size:8px; letter-spacing:.1em; }
}

/* De balk bovenin heeft twee rijen: eerst de knop, het merk en de taalkeuze,
   daaronder over de volle breedte het blok dat zegt waar je bent.
   De knop werd platgedrukt door de flexrij, vandaar de vaste breedte. */
@media (max-width:820px){
  .zijbalk{ align-items:center; }
  .zijbalk .zmenu{ flex:0 0 38px; }
  .zijbalk .zmerk{ order:-1; flex:1 1 auto; min-width:0; }
  .zijbalk .ztaal{ order:0; flex:0 0 auto; margin:0; }
  .zijbalk .zplek{ order:5; flex:1 0 100%; justify-content:center;
    margin:2px 0 0; }
}

/* De balk bovenin, netjes op twee rijen. flex-wrap stond elders op nowrap,
   waardoor de drie dingen op één rij bleven en het merk werd platgedrukt. */
@media (max-width:820px){
  .zijbalk{ flex-wrap:wrap !important; row-gap:8px; column-gap:12px;
    padding:12px 16px 12px; }
  .zijbalk .zmenu{ order:-2; flex:0 0 38px; }
  .zijbalk .zmerk{ order:-1; flex:1 1 auto; min-width:0; text-align:center; }
  .zijbalk .ztaal{ order:0; flex:0 0 auto; width:auto; margin:0;
    justify-content:flex-end; }
  .zijbalk .zplek{ order:5; flex:1 1 100%; width:100%; }
}

/* Het merk mag krimpen, anders duwt het de taalkeuze naar een eigen regel
   en wordt de balk onnodig hoog. Twee rijen is genoeg. */
@media (max-width:820px){
  .zijbalk .zmerk{ flex:1 1 0; }
  .zijbalk .zmerk img{ height:20px; }
  .zijbalk .zmerk b{ font-size:14px; letter-spacing:.2em; }
  .zijbalk .ztaal{ max-width:92px; }
}

/* De balk bovenin als raster in plaats van een flexrij: dan staat elk ding
   gegarandeerd op zijn plek en blijft de balk twee rijen hoog. */
@media (max-width:820px){
  .zijbalk{ display:grid !important; grid-template-columns:38px 1fr auto;
    align-items:center; column-gap:12px; row-gap:9px; padding:12px 16px; }
  .zijbalk .zmenu{ grid-column:1; grid-row:1; }
  .zijbalk .zmerk{ grid-column:2; grid-row:1; }
  .zijbalk .ztaal{ grid-column:3; grid-row:1; max-width:none; }
  .zijbalk .zplek{ grid-column:1 / -1; grid-row:2; }
  .zijbalk .znu{ display:none; }
}

/* Het gekleurde blok en de taalkeuze staan buiten het uitklapdeel, zodat ze op
   een telefoon in de balk blijven staan ook als het menu dicht is. Op een breed
   scherm horen ze gewoon in de kolom, tussen het merk en de reis. */
@media (min-width:821px){
  .zijbalk{ display:flex; flex-direction:column; align-items:stretch; }
  .zijbalk .zplek{ order:1; flex:0 0 auto; }
  .zijbalk .ztaal{ order:2; }
  .zijbalk .zuit{ order:3; }
  .zijbalk .zmerk{ order:0; }
}
@media (max-width:820px){
  .zijbalk .zplek{ display:flex !important; }
  body.menuopen .zijbalk .zplek,
  body.menuopen .zijbalk .ztaal{ position:relative; z-index:46; }
}

/* Uitgeklapt hoort de kop boven de reis er ook te staan, en de lijn tussen de
   stappen stopt bij de laatste: hij verbindt, hij hangt er niet onderuit. */
@media (max-width:820px){
  body.menuopen .zuit .zfasekop{ display:block; margin:6px 0 12px; }
  body.menuopen .zuit .fase button:last-child::before{ display:none !important; }
}
.zijbalk .fase button:last-child::before{ display:none; }

/* ── de drie formaten binnen het blauwdrukblok ────────────────────────
   Ze stonden als aparte rij eronder, waardoor hetzelfde blad zich twee keer
   aankondigde. Nu horen ze bij het blok waar ze over gaan. */
.bdprint{ grid-column:1 / -1; margin-top:22px; padding-top:20px;
  border-top:1px solid rgba(201,169,110,.24); }
.bdprintkop{ display:block; margin-bottom:12px; font-family:'Inter',system-ui,sans-serif;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--goudlicht); }
.bdprintrij{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bdprintknop{ display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:14px 10px; min-height:44px; text-decoration:none;
  border:1px solid rgba(201,169,110,.4); border-radius:2px;
  transition:border-color .18s, background .18s; }
.bdprintknop i{ font-style:normal; font-size:13px; line-height:1; color:var(--goudlicht); }
.bdprintknop b{ font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:#F6F0E7; }
.bdprintknop small{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:12.5px; color:rgba(246,240,231,.66); }
.bdprintknop:hover{ border-color:rgba(201,169,110,.8); background:rgba(201,169,110,.07); }
.bdprintknop:focus-visible{ outline:2px solid var(--goudlicht); outline-offset:2px; }
@media (max-width:600px){ .bdprintrij{ grid-template-columns:1fr; } }

/* een kopje boven de knoppenrij onderaan een fase, zodat Printen niet als
   losse balk in het niets hangt */
.knoppenkop{ margin:clamp(26px,4vw,40px) 0 10px; font-family:'Inter',system-ui,sans-serif;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--goudlicht); }
.knoppenkop + .knoppen{ margin-top:0; }
#helderheid .knoppenkop, #integratie .knoppenkop{ color:#866B28; }

/* Een knop die een link is (<a class="knop">) was inline, en een inline element
   met padding loopt over de regel erboven heen. In de slotbalk van fase 3 liep
   de knop daardoor door de laatste zin. */
a.knop{ display:inline-flex; align-items:center; justify-content:center; }
.slotbalk.breed .knop{ align-self:flex-start; flex:0 0 auto; }

/* Het cursieve tweede deel van een slotbalkkop is licht goud, gemaakt voor een
   donkere fase. In Integratie en onderaan Helderheid ligt hij op crème, daar
   hoort het diepere printgoud. */
#integratie .slotbalk.breed h2 em, #integratie .slotbalk.breed h3 em,
#helderheid .faseonder .slotbalk.breed h2 em,
#helderheid .faseonder .slotbalk.breed h3 em{ color:#866B28; }

/* ── het merkje bij een stap die in de proefperiode zit ───────────────
   Het stond alleen als zin in de lopende tekst; wie de knop scant leest die
   niet. Nu draagt de stap het zelf, boven de tekst. */
.wegproef{ display:inline-block; align-self:flex-start; margin-top:10px;
  padding:3px 8px; border:1px solid rgba(154,123,46,.4);
  font-family:'Inter',system-ui,sans-serif; font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--goudprint); }
.wegproef::before{ content:"\2726"; margin-right:6px; letter-spacing:0; }

/* ── Pagina 1 in drie stappen ─────────────────────────────────────────────
   Stap 1: het gewone welkomstscherm (achtergrond, tekst, knop 'start nu').
   Stap 2: na de klik verdwijnt dat scherm en speelt de video schermvullend,
   met 'verder' er onderin overheen. journey.js zet 'videovol' en 'speelt'
   op #drempel; na de video schuift het vanzelf naar het reis-paneel. */
.videovol.speelt .dp1{ position:relative; overflow:hidden; min-height:100vh; min-height:100svh; }
.videovol.speelt .dp1 .dbg, .videovol.speelt .dp1 .dwaas,
.videovol.speelt .dp1 .dvoet{ display:none; }
/* de video zit in .dbinnen: die laag blijft dus staan en vult het paneel */
.videovol.speelt .dp1 .dbinnen{
  position:absolute; inset:0; z-index:1; margin:0; padding:0; max-width:none;
  width:auto; display:flex; align-items:flex-end; justify-content:center;
}
/* alles van stap 1 gaat uit beeld, behalve de video en de verder-knop */
.videovol.speelt .dp1 .dbinnen > :not(.dvideo):not(.dverder){ display:none; }
.videovol.speelt .dp1 .dvideo{
  display:block; position:absolute; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; margin:0; border:0; border-radius:0;
  box-shadow:none; object-fit:cover; z-index:0; background:#000;
  cursor:pointer; /* een tik op het beeld pauzeert of hervat */
}
/* de knop hing door de kolomrichting van .dbinnen midden in beeld, over de
   titel in de video heen. Vastgezet onderin het midden, en stiller: geen
   volle goudvlak maar een doorschijnende pil op het donkere beeld. */
.videovol.speelt .dp1 .dverder{
  position:absolute; left:50%; bottom:clamp(28px,7vh,72px);
  transform:translateX(-50%); z-index:2; margin:0;
  background:rgba(16,13,8,.45); border:1px solid rgba(201,169,110,.45);
  border-radius:999px; padding:13px 30px; color:#F4E9D2;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.videovol.speelt .dp1 .dverder:hover{
  background:rgba(16,13,8,.65); border-color:rgba(201,169,110,.75);
}
/* de knop op het reis-paneel mag opvallen: een stuk groter */
.dreis .dknop.groot{
  font-size:1.35em; padding:22px 64px; letter-spacing:.14em;
}

/* ══ mobiel: laatste correcties ═══════════════════════════════════════
   Deze regels staan bewust achteraan, anders winnen de oudere balkregels. */
/* het welkomstscherm ligt boven alles: de balk bovenin (die hierboven met
   display:grid !important staat) hoort er dan niet overheen */
body.drempelopen .zijbalk,
body:has(#drempel:not([hidden])) .zijbalk{ display:none !important; }

@media (max-width:820px){
  /* fase 2 en 3: de hero schoof 6px buiten beeld omdat de negatieve marge
     (clamp, min. 22px) groter was dan de 16px rand van .wrap op mobiel */
  #helderheid{ margin:0 -16px; padding-left:16px; padding-right:16px; }
  #helderheid .hero, #integratie .hero{ margin-left:-16px; margin-right:-16px; }

  /* 16px voorkomt inzoomen op iOS bij het schrijfveld en het nummerveld */
  .rveld, .wremnr{ font-size:16px; }

  /* de stap als eigen scherm: het achtergrondbeeld (een ontwerpschets met de
     kaartenrij erin) schemerde door de tekst heen; nu dicht, alleen onderin
     komt het beeld nog even door */
  .opaneel[data-open] .okruimel{ background:
    linear-gradient(180deg, #1A1410 0%, #1A1410 72%, rgba(26,20,16,.82) 100%),
    var(--paneelbeeld) center bottom / cover no-repeat, #1A1410; }

  /* raakvlakken van minstens 44px; zichtbaar blijft het ongeveer gelijk */
  .zijbalk{ grid-template-columns:44px 1fr auto; }
  .zijbalk .zmenu{ flex-basis:44px; width:44px; height:44px; padding:14px 10px; }
  .taalkies button, .zijbalk .ztaal button{ min-width:44px; min-height:44px; padding:0 4px;
    border-bottom:0; text-underline-offset:5px; }
  .taalkies button.aan{ text-decoration:underline 1px rgba(201,169,110,.7); }
  .taalkies{ gap:0; }
  .dtaal{ top:8px; left:6px; }
  .opaneel[data-open] .osluit{ min-height:44px; padding:0 14px; }
  .dstippen{ gap:4px; }
  .dstippen button{ min-width:44px; min-height:44px; }

  /* paneel 2: 'verder' boven de maanstippen in plaats van eroverheen */
  .videovol.speelt .dp1 .dverder{ bottom:calc(22px + 44px + 14px); }
}

/* ── print ───────────────────────────────────────────────────
   Het scherm is donker met lichte tekst; een browser print standaard zonder
   achtergronden, dus die lichte tekst viel op wit papier weg. Op papier
   daarom altijd inkt op wit, zonder knoppen, menu's of animaties. */
@media print{
  @page{ margin:16mm 14mm; }
  :root{ --ink:#120E0B; --ink2:#241C16; --ink3:#4E4238; --goud:#6E5518;
         --goudlicht:#6E5518; --goudprint:#6E5518; --papyrus:#fff; }
  html, body{ background:#fff !important; color:#120E0B !important; }
  body{ padding:0 !important; }
  /* "print deze fase": alleen de fase die openstaat */
  .scherm:not(.aan){ display:none !important; }
  .scherm, .scherm *{ color:#241C16 !important; background-color:transparent !important;
    background-image:none !important; box-shadow:none !important; text-shadow:none !important;
    border-color:rgba(110,85,24,.35) !important; opacity:1 !important;
    animation:none !important; transition:none !important; transform:none !important;
    -webkit-text-fill-color:currentColor !important; filter:none !important; }
  .scherm h1, .scherm h2, .scherm h3, .scherm b, .scherm strong{ color:#120E0B !important; }
  .scherm em, .scherm i{ color:#6E5518 !important; }
  .scherm img{ max-width:100%; break-inside:avoid; }
  .scherm h1, .scherm h2, .scherm h3{ break-after:avoid; }
  .scherm section, .scherm article, .scherm li, .scherm blockquote{ break-inside:avoid; }

  /* de fasekop: beeld boven de tekst in plaats van eronder */
  .hero{ height:auto !important; min-height:0 !important; display:block !important; }
  .hero > img{ position:static !important; display:block; width:100% !important; margin:0 0 8mm !important;
    height:70mm !important; min-height:0 !important; object-fit:cover; }
  .hwaas, .hrechts, .vormbeeld::after{ display:none !important; }
  #helderheid .hero, #integratie .hero{ margin-left:0 !important; margin-right:0 !important; }
  .hero > img{ object-position:center 30%; }
  .bdvlak{ min-height:0 !important; padding:6mm !important; }
  .bdtekst{ max-width:none !important; }
  .bdnoot{ position:static !important; max-width:none !important; margin-top:5mm; }
  .htekst{ position:static !important; min-height:0 !important; height:auto !important; padding:0 !important; }

  /* kaarten: onder elkaar breken niet over een pagina */
  .okaarten{ grid-template-columns:1fr 1fr !important; gap:4mm !important; height:auto !important; }
  .okaart{ display:block !important; height:auto !important; border:1px solid rgba(110,85,24,.35) !important; }
  .okaart img{ height:28mm !important; }
  .okaart *{ height:auto !important; }
  .wegen, .vormen{ display:block !important; }
  .weg, .vorm{ margin-bottom:6mm; }
  .okaart, .weg, .vorm, .slotbalk, .rvak > *, .bdvlak, .spiegel{ break-inside:avoid; }
  .uitlijf{ display:block !important; height:auto !important; max-height:none !important; overflow:visible !important; }

  /* alles om te klikken hoort niet op papier; een ingevuld inzicht wel */
  .zijbalk, .balk, .fase, .drempel, footer, video, audio, .opijl, .bdprint, .knoppenkop,
  .scherm button:not(.okaart), .scherm .knop, .scherm .knoppen,
  .scherm textarea:placeholder-shown{ display:none !important; }
  .scherm textarea{ border:0 !important; resize:none; font-style:italic; }
}