/* Work Life Balance — "Na vijven · de dagklok"
   Donker avondlicht, Kerkis-serif, navigatie als dagklok links. */

@font-face{font-family:"Kerkis";src:url("kerkis.woff") format("woff");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Kerkis";src:url("kerkis-italic.woff") format("woff");font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:"Kerkis";src:url("kerkis-bold.woff") format("woff");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Kerkis";src:url("kerkis-bold-italic.woff") format("woff");font-weight:600 800;font-style:italic;font-display:swap}

:root{
  --nacht:#f5efe3;          /* daglicht-papier */
  --nacht-2:#fffaf1;
  --nacht-3:#efe6d5;
  --lijn:#e0d5c1;
  --lijn-2:#c9bba3;
  --tekst:#221d17;
  --kop:#15110c;
  --zacht:#4f473c;
  --mute:#7a6f60;
  --oranje:#e05f03;          /* oude huiskleur */
  --oranje-licht:#b44800;    /* leesbare linkkleur op papier */
  --amber:#a0520c;
  --maan:#3d5a8f;
  --groen:#3f8a52;
  --rood:#c2412f;
  --serif:"Kerkis","Bookman Old Style","URW Bookman",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --rail:300px;
  --sky:0;                   /* 0 = zonsondergang, 1 = middernacht (leesvoortgang) */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--nacht);color:var(--tekst);
  font-family:var(--serif);font-size:1.125rem;line-height:1.7;font-weight:400;
  background-image:radial-gradient(1100px 520px at 100% -8%,rgba(224,95,3,.13),transparent 62%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--oranje-licht);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:#000;padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 .6em;color:var(--kop)}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-top:2.2em}
h3{font-size:1.3rem;margin-top:1.8em}
h1 em,h2 em,.wm em{font-style:italic;color:var(--oranje-licht);font-weight:700}
p{margin:0 0 1.15em}
strong{color:var(--kop)}
ul,ol{padding-left:1.3em;margin:0 0 1.2em}
li{margin:.3em 0}
li::marker{color:var(--oranje-licht)}
hr{border:0;border-top:1px solid var(--lijn);margin:2.5rem 0}
small,.klein{font-size:.85rem}

/* ---------- Donkere zones: rail (hemel) en voettekst (nacht) ---------- */
.rail,.voet{--tekst:#ece3d3;--kop:#fff6e6;--zacht:#b3aa9b;--mute:#8d8679;--lijn:#2b2e3a;--lijn-2:#3a3e4d;--amber:#f6c27a;--oranje-licht:#f39a4a;--maan:#a9bde0;--nacht-2:#14161d;color:var(--tekst)}

/* ---------- Dagklok-rail (links) ---------- */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:40;
  background:linear-gradient(180deg,#191217 0%,#12121a 45%,#0b0c11 100%);
  border-right:1px solid var(--lijn);display:flex;flex-direction:column;
  padding:1.6rem 1.4rem 1.2rem;overflow-y:auto;scrollbar-width:thin;
}
.wm{display:block;text-decoration:none;color:var(--kop);font-weight:700;font-size:1.55rem;line-height:1.05;letter-spacing:-.01em}
.wm:hover{color:var(--oranje-licht)}
.wm small{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.92rem;color:var(--zacht);margin-top:.35rem;letter-spacing:0}
.klok{position:relative;margin:1.6rem 0 1rem;padding-left:2.4rem;flex:1}
.klok::before{ /* de tijdlijn */
  content:"";position:absolute;left:.7rem;top:.4rem;bottom:.4rem;width:2px;
  background:linear-gradient(180deg,var(--oranje) 0%,#b9542a 25%,#5c4a6e 60%,#2d3550 100%);border-radius:2px;
}
.zon{ /* zon/maan = leesvoortgang */
  position:absolute;left:.7rem;width:16px;height:16px;margin:-8px 0 0 -7px;border-radius:50%;
  top:calc(.4rem + var(--sky) * (100% - .8rem));
  background:radial-gradient(circle at 35% 35%,#ffe2b0,var(--oranje) 70%);
  box-shadow:0 0 0 4px rgba(224,95,3,.18),0 0 22px rgba(243,154,74,.7);
  transition:top .15s linear,background .3s;
}
.klok[data-nacht="1"] .zon{background:radial-gradient(circle at 60% 40%,#f4f6ff,var(--maan) 75%);box-shadow:0 0 0 4px rgba(169,189,224,.15),0 0 22px rgba(169,189,224,.55)}
.dagdeel{margin:0 0 1rem}
.dagdeel>span{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:.2rem;position:relative}
.dagdeel>span::before{content:"";position:absolute;left:-1.95rem;width:9px;height:2px;background:var(--lijn-2)}
.klok a{display:grid;grid-template-columns:3.1rem 1fr;align-items:baseline;gap:.25rem;padding:.28rem .4rem;margin-left:-.4rem;border-radius:6px;text-decoration:none;color:var(--zacht);font-size:1rem;line-height:1.3}
.klok a time,.klok a .u{font-family:var(--mono);font-size:.72rem;color:var(--mute)}
.klok a:hover{background:rgba(255,255,255,.05);color:#fff}
.klok a[aria-current="page"]{color:var(--kop);background:linear-gradient(90deg,rgba(224,95,3,.22),rgba(224,95,3,0));}
.klok a[aria-current="page"] .u{color:var(--amber)}
.rail-cta{display:block;text-align:center;text-decoration:none;font-weight:700;background:var(--oranje);color:#160b02;border-radius:999px;padding:.7rem 1rem;font-size:1rem;margin-top:.4rem}
.rail-cta:hover{background:var(--amber);color:#160b02}
.rail-noot{font-size:.78rem;color:var(--mute);margin:.9rem 0 0;font-style:italic;line-height:1.45}

/* mobiele topbalk + lade */
.top{display:none}
@media (max-width:980px){
  .rail{transform:translateX(-102%);transition:transform .28s ease;width:min(86vw,330px);box-shadow:none;visibility:hidden;transition:transform .28s ease,visibility 0s .28s}
  body.lade-open .rail{transform:none;visibility:visible;box-shadow:20px 0 60px rgba(0,0,0,.45);transition:transform .28s ease}
  .top{display:flex;position:sticky;top:0;z-index:30;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:rgba(245,239,227,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
  .top .wm{font-size:1.2rem}
  .top .wm small{display:none}
  .lade-knop{font:inherit;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#160b02;background:var(--oranje);border:0;border-radius:999px;padding:.55rem .95rem;cursor:pointer;display:flex;align-items:center;gap:.5rem}
  .lade-knop i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ffe2b0}
  .scherm{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35;opacity:0;pointer-events:none;transition:opacity .25s}
  body.lade-open .scherm{opacity:1;pointer-events:auto}
  .voortgang{position:fixed;left:0;top:0;height:3px;width:calc(var(--sky)*100%);background:linear-gradient(90deg,var(--oranje),var(--maan));z-index:50}
}
.lade-sluit{display:none}
@media (max-width:980px){.lade-sluit{display:block;position:absolute;right:.8rem;top:.8rem;background:none;border:1px solid var(--lijn-2);color:var(--tekst);border-radius:50%;width:2.2rem;height:2.2rem;font-size:1.2rem;cursor:pointer}}

/* ---------- Hoofdinhoud ---------- */
.pagina{margin-left:var(--rail);min-height:100vh;display:flex;flex-direction:column}
@media (max-width:980px){.pagina{margin-left:0}}
main{flex:1;width:100%;max-width:1180px;padding:0 clamp(1.2rem,4vw,4rem)}
.kruim{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:1.6rem 0 0}
.kruim ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.kruim li{margin:0}
.kruim li+li::before{content:"/";margin-right:.4rem;color:var(--lijn-2)}
.kruim a{color:var(--zacht);text-decoration:none}
.kruim a:hover{color:var(--amber)}

.kop{padding:clamp(2rem,6vw,4.5rem) 0 clamp(1.5rem,4vw,3rem);position:relative;border-bottom:1px solid var(--lijn);margin-bottom:2.5rem}
.uur{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:1.1rem}
.uur::before{content:"";width:2.2rem;height:1px;background:var(--amber)}
.kop h1{max-width:18ch}
.lead{font-size:clamp(1.2rem,1.9vw,1.42rem);font-style:italic;color:var(--zacht);max-width:40rem;line-height:1.55;margin:0}
.kop .groot-uur{ /* groot outline-uur achter de titel */
  position:absolute;right:0;top:clamp(1rem,4vw,2.5rem);font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(5rem,15vw,12rem);line-height:.9;color:transparent;-webkit-text-stroke:1.2px rgba(224,95,3,.32);
  pointer-events:none;user-select:none;letter-spacing:-.04em
}
@media (max-width:700px){.kop .groot-uur{opacity:.45}}

.raster{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:1180px){.raster{grid-template-columns:1fr}.zij{order:2}}
.tekst{max-width:43rem}
.tekst>p:first-of-type::first-letter{
  float:left;font-weight:700;font-size:4.2em;line-height:.82;margin:.08em .1em 0 0;color:var(--oranje-licht);
}
.tekst.geen-initiaal>p:first-of-type::first-letter{all:unset}
.tekst h2{counter-increment:h2}
.tekst{counter-reset:h2}
.tekst h2::before{content:counter(h2,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;color:var(--oranje-licht);margin-bottom:.5rem;font-weight:400}
.tekst.zonder-teller h2::before{content:none}

/* foto's als verlicht raam bij avond */
.raam{margin:.4rem 0 1.6rem;position:relative}
.raam img{border-radius:6px;box-shadow:0 0 0 8px #fff,0 0 0 9px var(--lijn),0 24px 50px -18px rgba(90,40,0,.45)}
.raam figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--mute);margin-top:1.1rem;display:flex;gap:.5rem}
.raam figcaption::before{content:"◐";color:var(--amber)}
.raam.rechts{float:right;margin:.4rem 0 1.4rem 2rem;max-width:min(46%,320px)}
.raam.links{float:left;margin:.4rem 2rem 1.4rem 0;max-width:min(46%,320px)}
@media (max-width:620px){.raam.rechts,.raam.links{float:none;margin:1rem 0 1.6rem;max-width:100%}}
.clear{clear:both}

/* "In één ademteug"-blok */
.adem{border:1px solid var(--lijn);background:linear-gradient(160deg,rgba(224,95,3,.10),rgba(224,95,3,0) 55%),var(--nacht-2);border-radius:14px;padding:1.4rem 1.5rem 1.2rem;margin:0 0 2.2rem;position:relative}
.adem>b{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:.6rem}
.adem>b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--oranje);box-shadow:0 0 12px var(--oranje)}
.adem ul{margin:0;padding-left:1.1em}
.adem p:last-child,.adem ul:last-child{margin-bottom:0}

/* aanvulling / kader */
.kader{border-left:3px solid var(--maan);background:rgba(61,90,143,.06);padding:1rem 1.2rem;margin:1.6rem 0;border-radius:0 10px 10px 0}
.kader>b:first-child{display:block;font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maan);margin-bottom:.35rem}
.kader p:last-child{margin-bottom:0}
.kader.warm{border-color:var(--oranje);background:rgba(224,95,3,.07)}
.kader.warm>b:first-child{color:var(--amber)}

blockquote{margin:2rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--oranje);font-style:italic;font-size:1.3rem;line-height:1.45;color:var(--kop)}

/* zijkolom */
.zij{position:sticky;top:1.5rem;font-size:.98rem}
@media (max-width:1180px){.zij{position:static}}
.zij h2{font-size:.72rem;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:400;margin:0 0 .7rem}
.zij h2::before{content:none}
.zij-blok{border:1px solid var(--lijn);border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1.2rem;background:var(--nacht-2)}
.zij-blok ol,.zij-blok ul{list-style:none;padding:0;margin:0}
.zij-blok li{margin:0;border-top:1px dashed var(--lijn)}
.zij-blok li:first-child{border-top:0}
.zij-blok a{display:block;padding:.45rem 0;color:var(--zacht);text-decoration:none;line-height:1.35}
.zij-blok a:hover{color:var(--kop)}
.zij-blok a[aria-current="page"]{color:var(--amber)}
.inhoud a{font-size:.92rem}

/* volgende-uur-balk */
.volgende{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3.5rem 0 1rem}
.volgende a{display:block;border:1px solid var(--lijn);border-radius:14px;padding:1.1rem 1.3rem;text-decoration:none;color:var(--tekst);background:var(--nacht-2);transition:border-color .2s,transform .2s}
.volgende a:hover{border-color:var(--oranje);transform:translateY(-2px)}
.volgende span{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:.3rem}
.volgende strong{font-size:1.15rem;line-height:1.3}
.volgende .na{text-align:right}
@media (max-width:620px){.volgende{grid-template-columns:1fr}.volgende .na{text-align:left}}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:700;font-size:1.02rem;text-decoration:none;border-radius:999px;padding:.75rem 1.35rem;background:var(--oranje);color:#160b02;border:0;cursor:pointer}
.knop:hover{background:var(--amber);color:#160b02}
.knop.lijn{background:transparent;color:var(--tekst);box-shadow:inset 0 0 0 1px var(--lijn-2)}
.knop.lijn:hover{box-shadow:inset 0 0 0 1px var(--oranje);color:var(--kop)}
.knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0}

/* ---------- Home ---------- */
.home-kop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(2.2rem,6vw,5rem) 0 clamp(2rem,5vw,3.5rem);border-bottom:1px solid var(--lijn);margin-bottom:3rem}
@media (max-width:860px){.home-kop{grid-template-columns:1fr}}
.home-kop h1{font-size:clamp(2.6rem,5.6vw,4.8rem);max-width:none}
.weeg{width:100%;max-width:440px;margin-inline:auto}
.weeg svg{width:100%;height:auto;overflow:visible}
.weeg .balk{transform-origin:220px 120px;transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.weeg-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--mute);margin-top:.4rem}

.uren-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0 3rem}
@media (max-width:760px){.uren-rij{grid-template-columns:1fr}}
.uren-rij div{border-top:2px solid var(--oranje);padding-top:.9rem}
.uren-rij b{display:block;font-size:2.6rem;line-height:1;color:var(--kop)}
.uren-rij span{color:var(--zacht);font-size:.98rem}

.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1.5rem 0 3rem}
.tegel{position:relative;display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--lijn);border-radius:16px;padding:1.3rem 1.3rem 1.2rem;background:var(--nacht-2);text-decoration:none;color:var(--tekst);min-height:180px;overflow:hidden;transition:border-color .2s,transform .2s}
.tegel:hover{border-color:var(--oranje);transform:translateY(-3px);color:var(--tekst)}
.tegel .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--amber);text-transform:uppercase}
.tegel strong{font-size:1.28rem;line-height:1.25}
.tegel p{margin:0;color:var(--zacht);font-size:.98rem;line-height:1.5}
.tegel .nr{position:absolute;right:.8rem;bottom:-.6rem;font-size:5.5rem;font-style:italic;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(224,95,3,.25)}
.tegel.tool{background:linear-gradient(150deg,rgba(224,95,3,.16),rgba(224,95,3,.02) 60%),var(--nacht-2)}

.sectie-kop{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3.5rem}
.sectie-kop h2{margin:0}
.sectie-kop h2::before{content:none}

/* ---------- Tools ---------- */
.tool{border:1px solid var(--lijn);border-radius:18px;background:var(--nacht-2);box-shadow:0 18px 40px -30px rgba(60,30,0,.35);padding:clamp(1.2rem,3vw,2rem);margin:0 0 2.5rem}
.tool h2{margin-top:0}
.tool h2::before{content:none}
.veld{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.3rem 1rem;padding:.8rem 0;border-top:1px dashed var(--lijn)}
.veld:first-of-type{border-top:0}
.veld label{font-weight:700}
.veld small{grid-column:1/-1;color:var(--mute);font-size:.86rem;line-height:1.4}
.veld output{font-family:var(--mono);font-size:1rem;color:var(--amber);min-width:4.5ch;text-align:right}
.veld input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--oranje)}
input,select,button,textarea{font:inherit}
input[type=number],input[type=time],select{background:#fff;color:var(--tekst);border:1px solid var(--lijn-2);border-radius:8px;padding:.5rem .7rem;font-family:var(--mono);font-size:.95rem}
.tool-uit{display:grid;grid-template-columns:260px minmax(0,1fr);gap:2rem;align-items:center;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--lijn)}
@media (max-width:760px){.tool-uit{grid-template-columns:1fr}}
.ring svg{width:100%;max-width:260px;height:auto;display:block;margin:auto}
.score{font-size:3rem;font-weight:700;line-height:1;color:var(--kop)}
.score small{font-size:1rem;color:var(--mute);font-weight:400}
.legenda{list-style:none;padding:0;margin:.8rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;font-size:.92rem}
.legenda li{display:flex;align-items:center;gap:.45rem;margin:0}
.legenda i{width:.8rem;height:.8rem;border-radius:3px;flex:none}
.advies{list-style:none;padding:0;margin:1rem 0 0}
.advies li{padding:.55rem 0 .55rem 1.6rem;border-top:1px dashed var(--lijn);position:relative;margin:0;line-height:1.45}
.advies li::before{content:"";position:absolute;left:.2rem;top:1.05rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--oranje)}
.advies li.ok::before{background:var(--groen)}
.advies li.let::before{background:var(--rood)}
.dagplan{list-style:none;padding:0;margin:1rem 0 0;border-left:2px solid var(--lijn-2)}
.dagplan li{display:grid;grid-template-columns:4.5rem 1fr;gap:.8rem;padding:.5rem 0 .5rem 1rem;margin:0;position:relative}
.dagplan li::before{content:"";position:absolute;left:-6px;top:1.05rem;width:10px;height:10px;border-radius:50%;background:var(--lijn-2)}
.dagplan li.piek::before{background:var(--oranje);box-shadow:0 0 10px var(--oranje)}
.dagplan li.dip::before{background:var(--maan)}
.dagplan time{font-family:var(--mono);color:var(--amber);font-size:.9rem}
.dagplan span{color:var(--zacht)}
.dagplan b{color:var(--kop)}
.tabel{width:100%;border-collapse:collapse;margin:1rem 0;font-size:1rem}
.tabel th,.tabel td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel th{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.tabel td.n{font-family:var(--mono);color:var(--amber);white-space:nowrap}
.tabel-wrap{overflow-x:auto}
.check{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-top:1px dashed var(--lijn);cursor:pointer;line-height:1.45}
.check input{margin-top:.35rem;accent-color:var(--oranje);width:1.05rem;height:1.05rem;flex:none}

/* adem-oefening */
.ademcirkel{display:grid;place-items:center;margin:1.5rem auto;width:240px;height:240px;position:relative}
.ademcirkel .bol{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd9a8,var(--oranje) 70%);box-shadow:0 0 50px rgba(224,95,3,.55);transition:transform 4s ease-in-out}
.ademcirkel.in .bol{transform:scale(1.95)}
.ademcirkel .fase{position:absolute;bottom:-2.2rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}

/* FAQ */
details{border-top:1px solid var(--lijn);padding:.3rem 0}
details:last-of-type{border-bottom:1px solid var(--lijn)}
summary{cursor:pointer;list-style:none;font-weight:700;font-size:1.15rem;padding:.8rem 2rem .8rem 0;position:relative;color:var(--kop)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.2rem;top:.55rem;font-size:1.5rem;color:var(--oranje-licht);font-weight:400;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details>div{padding:0 0 1rem;color:var(--zacht)}

/* ---------- Footer (groot): de nacht ---------- */
.voet{margin-top:5rem;position:relative;overflow:hidden;
  background:
    radial-gradient(1.4px 1.4px at 8% 22%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 64%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 47% 14%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 63% 48%,rgba(255,255,255,.3) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 81% 26%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 92% 70%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(900px 300px at 50% -20%,rgba(224,95,3,.35),transparent 70%),
    linear-gradient(180deg,#1a1320 0%,#0d0e13 45%,#08090c 100%)}
.voet::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--oranje),#b9542a 40%,#5c4a6e 70%,#2d3550)}
.voet-maan{position:absolute;right:clamp(1.5rem,6vw,6rem);top:3rem;width:clamp(70px,9vw,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 62% 38%,#f4f6ff,#a9bde0 70%);box-shadow:0 0 60px rgba(169,189,224,.45)}
.voet-maan::after{content:"";position:absolute;inset:-6% auto auto -18%;width:100%;height:100%;border-radius:50%;background:#120f18;opacity:.0}
.voet-groot{padding:clamp(3rem,7vw,5.5rem) clamp(1.2rem,4vw,4rem) 2.5rem;max-width:1180px}
.voet-slogan{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,6.5vw,5.6rem);line-height:1;letter-spacing:-.02em;color:var(--kop);margin:0 0 1rem;max-width:12ch}
.voet-slogan em{font-style:italic;color:var(--oranje-licht)}
.voet-intro{font-style:italic;color:var(--zacht);max-width:34rem;margin:0 0 2rem;font-size:1.15rem}
.voet-kolommen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;padding-top:2.2rem;border-top:1px solid var(--lijn)}
@media (max-width:860px){.voet-kolommen{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.voet-kolommen{grid-template-columns:1fr}}
.voet-kolommen h2{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 .8rem}
.voet-kolommen ul{list-style:none;padding:0;margin:0}
.voet-kolommen li{margin:.35rem 0}
.voet a{color:var(--zacht);text-decoration:none}
.voet a:hover{color:var(--kop)}
.voet-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;padding:1.3rem clamp(1.2rem,4vw,4rem);font-size:.88rem;color:var(--mute);border-top:1px solid var(--lijn)}
.voet-in nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.voet .wm{font-size:1rem;display:inline;color:var(--kop)}

@media print{
  .rail,.top,.voet,.volgende,.zij,.knoppen,.scherm{display:none!important}
  .pagina{margin:0}
  body{background:#fff;color:#000}
  h1,h2,h3,strong{color:#000}
}