/* ==========================================================================
   richting C · nachtdienst.css · jouw nachtdienst (voor wie zijn branche niet ziet op de kiezer)
   Bovenop c.css, sheet.css en audit.css. De kop, het slot, het team en de vragen komen overeen met
   maakindustrie.css; daaronder de week, de rekenhulp, de lijst en de afdruk op A4.
   Let op: .wrap draagt de zijmarges. Zet op een element met .wrap nooit een padding-shorthand.
   ========================================================================== */

/* Archivo komt later binnen dan de tekst: met een terugval op maat (size-adjust) valt de kop niet
   bij het laden in meer regels en verspringt de held (zelfde aanpak als op de hub en de kiezer). */
@font-face{font-family:"Archivo terugval";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Arial");font-weight:600 900;size-adjust:76%}
:root{--display:'Archivo','Archivo terugval',sans-serif}
html.static .pulse{animation:none}

/* ---------- kopregel: de knop met zijn geruststelling ernaast ---------- */
.nav-note{display:none;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap;margin-right:6px}
@media(min-width:1180px){.nav-note{display:inline}}
@media(max-width:700px){.nav-cta-m{display:none!important}}

.cta-note{font:500 11.5px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-55)}
.cta-proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;font:500 13px/1.65 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.cta-proof .led{margin-right:12px;transform:translateY(-1px)}
.cta-proof-t > span{white-space:nowrap}
.cta-proof-t > span:not(:last-child):not([hidden])::after{content:"·";margin-left:.8em;margin-right:.3em;color:var(--fg-55)}
.cta-proof-t > span:nth-last-child(2):has(+ [hidden])::after{content:none}
.cta-proof [hidden]{display:none}
@media(max-width:400px){.cta-proof{font-size:12px;letter-spacing:.04em}.cta-proof-t > span{white-space:normal}}
.cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(36px,4.6vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.cta-line{font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.008em;
  font-size:clamp(26px,3vw,44px);line-height:1;max-width:24ch;text-wrap:balance}
.cta-line-body{font-family:var(--body);font-weight:500;font-stretch:100%;font-variation-settings:normal;text-transform:none;letter-spacing:0;font-size:clamp(19px,1.7vw,24px);line-height:1.4;max-width:34ch}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-act .cta-note{max-width:44ch}
.cta-act .btn-ghost{min-height:46px;font-size:15px}
@media(max-width:860px){.cta-row{grid-template-columns:minmax(0,1fr)}.cta-act .btn{width:100%}}
.zone-ivory .btn-lime{background:var(--ink);color:var(--ivory)}
@media(hover:hover) and (pointer:fine){.zone-ivory .btn-lime:hover{box-shadow:0 14px 30px -14px rgba(10,14,22,.75)}}
.zone-ivory .btn-ivory{background:var(--ink);color:var(--ivory)}
.zone-ivory .led{background:var(--cobalt-deep);box-shadow:0 0 0 3px rgba(20,54,245,.14)}
.team{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);min-width:0}
.team-text h3{font-size:clamp(28px,2.7vw,40px);max-width:16ch}
.team-text p{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--fg-70);max-width:42ch}
@media(max-width:960px){
  .offer-grid,.offer-act{grid-template-columns:minmax(0,1fr)}
  .team{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,40px)}
}
@media(max-width:620px){.team{grid-template-columns:minmax(0,1fr)}}

/* ---------- de vragen en het slot ---------- */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(28px,5vw,96px);align-items:start}
.faq-head h2{font-size:clamp(40px,4.6vw,72px);margin-top:14px;max-width:11ch}
.faq-list{margin:0;display:flex;flex-direction:column}
.faq-list > div{padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:8px clamp(16px,2.4vw,40px)}
.faq-list > div:last-child{border-bottom:1px solid var(--line)}
.faq-list dt{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(19px,1.6vw,23px);line-height:1.12}
.faq-list dd{margin:0;font-size:16px;line-height:1.6;color:var(--fg-70);max-width:56ch}
@media(max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}.faq-head h2{max-width:none}}
@media(max-width:600px){.faq-list > div{grid-template-columns:minmax(0,1fr)}}

.sticky-cta .btn{flex-direction:column;gap:3px;min-height:54px;line-height:1.1}
.sticky-cta .btn small{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.sticky-cta.is-hot{will-change:transform}


/* ==========================================================================
   jouw nachtdienst: de week, de rekenhulp, de lijst
   ========================================================================== */
.others-in{padding-top:clamp(36px,4vw,56px)}
.others-in > .kicker{margin-bottom:16px}
.others a:active{transform:scale(.985);transition-duration:.08s}
.merkregel .sec-in{padding-top:clamp(44px,6vw,96px);padding-bottom:clamp(44px,6vw,96px)}
.merkregel .h-cond{font-size:clamp(40px,6.4vw,108px);max-width:14ch}
.merkregel .h-cond em{font-style:normal;color:var(--lime)}
.nowrap{white-space:nowrap}
html:not(.js) [data-js-only]{display:none!important}
.nd-hint{font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-55)}

/* ---------- het podium: kop, scène en week horen bij elkaar. Op een groot scherm blijft de scène rechts staan terwijl
   je de week vult; op een telefoon staat hij bovenaan, 56vw hoog, en scrolt hij gewoon mee (niet sticky). ---------- */
.nd-podium{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4vw,72px);
  grid-template-areas:"copy stage" "act stage" "week stage";align-items:start}
.nd-hero{grid-area:copy;padding-bottom:0}
.nd-hero h1{font-size:clamp(40px,5vw,80px)}
.nd-hero h1 [data-klok-a]{display:block;font-variant-numeric:tabular-nums}
.nd-hero h1 [data-klok-a][hidden]{display:none}
.nd-hero .lede{max-width:46ch}
.nd-hero-act{grid-area:act;padding:clamp(18px,2.2vw,28px) 0 clamp(28px,4vw,56px)}
.nd-held{grid-area:stage;position:sticky;top:88px;margin:clamp(40px,6vw,96px) 0 clamp(28px,4vw,56px);min-width:0;z-index:2}
.nd-weeksec{grid-area:week;border-top:1px solid var(--line-soft);padding:clamp(40px,5vw,80px) 0 clamp(56px,7vw,112px);min-width:0}
.nd-weeksec .sec-head{margin-bottom:clamp(18px,2.4vw,28px)}
.nd-weeksec .sec-head h2{font-size:clamp(40px,4.6vw,76px)}
.nd-3d{position:relative;aspect-ratio:640/420;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);contain:strict;
  background:radial-gradient(90% 60% at 50% 100%,rgba(198,242,78,.08),transparent 60%),radial-gradient(110% 90% at 30% 0%,rgba(61,102,255,.22),transparent 62%),linear-gradient(180deg,#15203A,#05070D)}
.nd-3d svg{width:100%;height:100%}
.nd-3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .5s var(--ease)}
.nd-3d canvas.is-grijp{cursor:grabbing}
.nd-3d[data-staat="3d"] canvas{opacity:1}
.nd-3d[data-staat="3d"] svg{visibility:hidden}
/* telefoon en tablet: de film (nachtfilm.js). De poster ligt erboven tot de film speelt; zonder JavaScript alleen de poster. */
.nd-film-poster,.nd-film{display:none}
@media (pointer:coarse),(max-width:899px){
  .nd-film-poster,.nd-film{display:block;position:absolute;inset:0;width:100%;height:100%}
  .nd-film{object-fit:cover;z-index:1}
  .nd-film-poster{z-index:2;transition:opacity .25s var(--ease)}
  .nd-film-poster img{display:block;width:100%;height:100%;object-fit:cover}
  .is-speelt>.nd-film-poster{opacity:0}
  .nd-3d[data-staat="film"]{cursor:pointer;-webkit-tap-highlight-color:transparent}
}
/* de teller: sinds je hier bent. Vaste maat: het getal verandert, de rest van de held niet. */
.nd-teller{display:flex;align-items:center;gap:10px;height:17px;margin-top:12px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-70);white-space:nowrap;contain:strict}
.nd-teller b{font-weight:600;color:var(--lime);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nd-held-onder{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.nd-held-tel{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-70)}
.nd-held-tel b{font-weight:500;color:var(--lime);font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-right:4px}
@media(max-width:979px){
  .nd-podium{display:block}
  .nd-hero h1{font-size:clamp(34px,9.6vw,72px)}
  .nd-held{position:relative;top:auto;margin:18px 0 0;z-index:auto}
  /* telefoon: vaste maat (3:2, zoals de film), contain: strict, geen transform op de host tijdens het scrollen */
  .nd-held .nd-3d{aspect-ratio:3/2;height:auto;max-height:46vh}
  .nd-held-onder{display:none}
  .nd-hero-act .btn{width:100%}
  .nd-teller{position:absolute;left:10px;bottom:10px;margin:0;padding:6px 10px;border-radius:8px;background:rgba(5,7,13,.72);font-size:10px;letter-spacing:.04em;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;height:auto;contain:layout paint}
}

/* telefoon: geen backdrop-filter op de kopbalk en de vaste knop. Anders wordt bij elk scrollbeeld opnieuw vervaagd wat
   eronder schuift (ook het canvas van de scène). Een bijna dichte kleur ziet er hetzelfde uit en kost niets. */
@media(max-width:979px){.top,.sticky-cta{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--ink)!important}} /* dicht: niets schijnt erdoor */

/* ---------- het filter op je systemen: één knop, de gekozen chips ernaast, het paneel ingeklapt ---------- */
.nd-filter{margin:0 0 18px;display:flex;flex-direction:column;gap:12px}
.nd-filter-rij{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nd-filterknop{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid rgba(140,162,255,.45);background:transparent;color:var(--fg);
  font:500 14px/1 var(--body);cursor:pointer}
.nd-filterknop svg{width:12px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.nd-filterknop[aria-expanded="true"]{border-color:var(--lime)}
.nd-filterknop[aria-expanded="true"] svg{transform:rotate(180deg)}
@media(hover:hover) and (pointer:fine){.nd-filterknop:hover{border-color:var(--lime)}}
.nd-gekozen{list-style:none;padding:0;margin:0;display:contents}
.nd-gekozen-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 10px 0 6px;border-radius:9px;border:1px solid var(--lime);background:rgba(198,242,78,.12);color:var(--fg);font:500 13px/1 var(--mono);cursor:pointer}
.nd-gekozen-chip .nd-sysm{background:var(--lime);border-color:var(--lime);color:var(--ink);margin-right:7px}
.nd-gekozen-chip .nd-x{margin-left:8px;font-size:15px;opacity:.7}
.nd-gekozen-chip.is-anders{border-style:dashed;padding-left:10px;cursor:default}
.nd-sys-paneel{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px}
.nd-sys-paneel[hidden]{display:none}
.nd-syschips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.nd-syschip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px 0 8px;border-radius:10px;border:1px solid rgba(140,162,255,.38);background:rgba(10,14,22,.4);
  color:var(--fg);font:500 13.5px/1 var(--mono);letter-spacing:.02em;cursor:pointer;transition:border-color .15s,background .15s}
.nd-syschip small{margin-left:8px;font:500 10px/1 var(--mono);letter-spacing:.04em;color:var(--fg-55)}
@media(max-width:560px){.nd-syschip small{display:none}.nd-syschip{padding-right:11px;font-size:13px}}
.nd-syschip[aria-pressed="true"]{border-color:var(--lime);background:rgba(198,242,78,.12)}
.nd-syschip[aria-pressed="true"] .nd-sysm{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.nd-syschip[aria-expanded="true"]{border-color:var(--peri)}
@media(hover:hover) and (pointer:fine){.nd-syschip:hover{border-color:var(--lime)}}
.nd-sysm{display:inline-grid;place-items:center;flex:none;min-width:24px;height:22px;padding:0 3px;margin-right:9px;border-radius:5px;border:1px solid rgba(244,243,239,.4);
  font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.04em;color:var(--fg)}
.nd-sysm.is-leeg{border-style:dashed;border-color:rgba(244,243,239,.22)}
.nd-anders{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.nd-anders[hidden]{display:none}
.nd-anders .nd-veld{flex:1 1 200px}
.nd-anders .btn{min-height:46px;font-size:14.5px}
.nd-sys-melding{color:var(--fg-70);font-style:italic;min-height:0}
.nd-sys-melding:empty{display:none}

/* ---------- de werkplaats: je week en de klussen ---------- */
.nd-werk{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start}
.nd-bak-kop{font:600 11.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.nd-bak{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(14px,2vw,22px);border:1px dashed rgba(140,162,255,.34);border-radius:16px;transition:border-color .2s,background-color .2s}
.nd-bak.is-doel{border-color:var(--red);background-color:rgba(255,92,92,.06)}
.nd-bak-sub{font-size:15px;line-height:1.5;color:var(--fg-70);max-width:52ch}
.nd-groepen{display:flex;flex-direction:column;gap:16px}
.nd-groep-kop{font:600 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--peri);margin-bottom:8px}
.nd-chips{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px}
/* een klus: groot, de naam leesbaar op 390 px (16 px), tik = toevoegen */
.nd-chip{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;width:100%;min-height:68px;padding:10px 14px 10px 11px;border-radius:12px;
  border:1px solid rgba(140,162,255,.4);background:rgba(61,102,255,.14);color:var(--fg);font:600 16px/1.25 var(--body);text-align:left;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease),border-color .15s,background-color .15s}
.nd-chip-kop{display:flex;align-items:flex-start;min-width:0}
.nd-chip-kop .nd-sysm{margin-top:-1px}
.nd-chip-naam{min-width:0}
.nd-chip-onder{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:33px}
.nd-chip-st{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lime);white-space:nowrap}
.nd-chip small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--peri);white-space:nowrap}
.nd-chip:active{transform:scale(.97)}
.nd-chip.is-gezet{border-color:var(--lime);background-color:rgba(198,242,78,.12)}
@media(hover:hover) and (pointer:fine){.nd-chip:hover{border-color:var(--lime);background-color:rgba(61,102,255,.24)}}
@media(max-width:560px){.nd-chips{grid-template-columns:minmax(0,1fr);gap:8px}}
.nd-eigen-d{border-top:1px solid var(--line-soft);padding-top:12px;margin-top:2px}
.nd-eigen-d > summary,.nd-klep > summary{list-style:none;cursor:pointer}
.nd-eigen-d > summary::-webkit-details-marker,.nd-klep > summary::-webkit-details-marker{display:none}
.nd-eigen-d > summary{display:inline-flex;align-items:center;min-height:44px;font:600 11.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.nd-eigen-d > summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;border-radius:6px;border:1px solid var(--line);font:500 14px/1 var(--mono)}
.nd-eigen-d[open] > summary::before{content:"–"}
.nd-eigen{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.nd-eigen-rij{display:grid;grid-template-columns:minmax(0,1fr) 92px 128px;gap:10px}
@media(max-width:560px){.nd-eigen-rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.nd-veld-naam{grid-column:1 / -1}}
.nd-veld{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:13.5px;color:var(--fg-70)}
.nd-veld input,.nd-veld select{font:16px/1.2 var(--body);min-height:46px;padding:0 12px;width:100%;border:1.5px solid rgba(140,162,255,.3);border-radius:10px;background:rgba(10,14,22,.55);color:var(--fg)}
.nd-veld input:focus,.nd-veld select:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.2)}
.nd-eigen .btn{align-self:flex-start;min-height:44px;font-size:14.5px}
.nd-melding{font-size:14px;color:var(--amber);min-height:1.4em}

.nd-weekvak{min-width:0;display:flex;flex-direction:column;gap:10px}
.nd-week-kop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 16px}
.nd-meter{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-70);text-align:right;grid-column:3}
.nd-meter b{font-weight:500;color:var(--lime);font-size:18px;font-variant-numeric:tabular-nums}
.nd-meterbalk{grid-column:1 / -1;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.nd-meterbalk i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(.375)}
.nd-schaal{display:flex;justify-content:space-between;margin-left:60px;font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--fg-55)}
@media(max-width:560px){.nd-schaal{margin-left:0}}

/* de week: per dag één baan. Een blok is --w uur breed op plek --x (8 uur = de hele baan). CSS zet ze neer;
   JavaScript schrijft --x en --w alleen als er iets verandert. Tijdens slepen alleen transform op het blok. */
.nd-week{--baan:52px;position:relative;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.nd-rij{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center}
.nd-rij.is-vol .nd-rij-naam small{color:var(--amber)}
.nd-rij-naam{display:flex;flex-direction:column;gap:3px;font:600 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.nd-rij-naam small{font:500 10px/1.3 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--fg-55);white-space:nowrap}
@media(max-width:560px){
  .nd-rij{grid-template-columns:minmax(0,1fr);gap:5px}
  .nd-rij-naam{flex-direction:row;align-items:baseline;gap:10px}
}
.nd-banen{position:relative;height:var(--baan);contain:size layout style} /* een eigen layoutgrens: een blok verplaatsen legt alleen zijn baan opnieuw uit */
.nd-baan{position:absolute;inset:0;border-radius:10px}
.nd-baan-dag{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(140,162,255,.14) calc(12.5% - 1px),rgba(140,162,255,.14) 12.5%),rgba(140,162,255,.07);border:1px solid var(--line)}
.nd-blokken{list-style:none;padding:0;margin:0;position:absolute;inset:0;pointer-events:none}
.nd-blok{--i:0;position:absolute;top:3px;bottom:3px;left:calc(var(--x) / 8 * 100% + 1px);width:calc(var(--w) / 8 * 100% - 3px);pointer-events:auto;
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 16px 4px 9px;border-radius:8px;
  background:var(--cobalt);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -10px rgba(0,0,0,.9);
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline-offset:2px}
.nd-blok b{position:relative;z-index:1;font:600 14px/1.15 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-blok small{position:relative;z-index:1;display:flex;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.04em;opacity:.85;white-space:nowrap}
.nd-blok small .nd-sysm{min-width:17px;height:13px;margin-right:5px;font-size:8px;padding:0 2px;border-radius:3px;border-color:currentColor}
.nd-blok.is-los{z-index:5;cursor:grabbing;box-shadow:0 18px 36px -12px rgba(0,0,0,.95),0 0 0 2px var(--lime)}
/* 's nachts: het blok wordt lime (alleen opacity van een laag erboven, met de naam erin), blok na blok */
.nd-blok::after{content:attr(data-naam);position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding:0 16px 0 9px;border-radius:inherit;
  background:var(--lime);color:var(--ink);font:600 14px/1.15 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;will-change:opacity;transition:opacity .35s var(--ease) calc(var(--i) * 90ms)} /* kleine lagen, vooraf: de nacht begint zonder lagen aan te maken */
.nd-week.is-nacht .nd-blok::after{opacity:1;transition-delay:calc(var(--i) * 90ms + 1000ms)}
.nd-blok.is-zakt::after{opacity:1;transition-duration:.6s;transition-delay:0s}
.nd-greep{position:absolute;z-index:3;right:0;top:0;bottom:0;width:18px;cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center}
.nd-greep::after{content:"";width:3px;height:16px;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor;opacity:.55}
.nd-week.is-nacht .nd-greep{visibility:hidden;pointer-events:none} /* geen display: dat zou de week opnieuw uitleggen bij de start van de nacht */
/* waar het blok landt: één vlak dat met transform meeloopt, alleen bij een andere dag */
.nd-doel{position:absolute;left:0;right:0;top:0;height:60px;border-radius:12px;background:rgba(198,242,78,.07);box-shadow:0 0 0 1px rgba(198,242,78,.5);opacity:0;pointer-events:none;transition:opacity .12s}
.nd-doel.is-aan{opacity:1}
.nd-toetsen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nd-weekvak:focus-within .nd-toetsen{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.nd-week-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(20px,2.4vw,28px)}
.nd-week-act .btn{min-height:54px}
@media(max-width:560px){.nd-week-act .btn{width:100%}}
.nd-status{font-size:15px;line-height:1.5;color:var(--fg-70);max-width:52ch;flex:1 1 260px}
.nd-status b{color:var(--lime);font-weight:600}
.nd-status a{color:var(--lime);font-weight:600;text-underline-offset:4px}

/* ---------- je ochtend: direct onder de knop. Met JavaScript pas na de nachtdienst, zonder gewoon zichtbaar. ---------- */
.nd-brief{margin-top:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);outline:none}
/* dicht: wel opgemaakt (hoogte 0, onzichtbaar, niet te focussen), zodat openen geen hele layout in één beeld kost */
.js .nd-brief.is-dicht:not(.is-open){height:0;margin-top:0;overflow:hidden;visibility:hidden}
.nd-brief-kop h2{font-size:clamp(34px,3.8vw,60px);margin-top:12px;max-width:16ch}
.nd-brief-kop .sub{margin-top:12px;max-width:52ch;color:var(--fg-70);font-size:16.5px;line-height:1.5}
.nd-slotregel{display:flex;flex-direction:column;gap:8px;padding:clamp(16px,2vw,22px);border:1px solid var(--line);border-radius:16px}
.nd-dagen{font:600 clamp(19px,1.8vw,24px)/1.25 var(--body);color:var(--fg)}
.nd-dagen b{font:600 clamp(28px,3vw,40px)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--lime)}
.nd-ueuro{font-size:16.5px;color:var(--fg-70)}
.nd-ueuro b{font:600 clamp(20px,1.9vw,26px)/1.1 var(--mono);letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.nd-slotregel .stamps{margin-top:4px}
.nd-klep{border:1px solid var(--line);border-radius:14px}
.nd-klep > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 16px;font:600 15px/1.3 var(--body);color:var(--fg)}
.nd-klep > summary svg{width:12px;height:8px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.nd-klep[open] > summary svg{transform:rotate(180deg)}
.nd-klep > summary:focus-visible{outline:2px solid var(--peri);outline-offset:2px;border-radius:14px}
.nd-reken{display:flex;flex-direction:column;gap:2px;padding:0 16px 16px}
.nd-rrij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:12px 0;border-top:1px solid var(--line-soft)}
.nd-rrij-schuif .nd-schuif,.nd-rrij-schuif .nd-hint{grid-column:1 / -1}
.nd-rlbl{font:600 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-70)}
.nd-rwaarde{font-size:16px;color:var(--fg-70);text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.nd-rwaarde b{font:600 22px/1 var(--mono);letter-spacing:-.03em;color:var(--fg);font-variant-numeric:tabular-nums}
.nd-rlink{font-size:13px;color:var(--fg-55)}
.nd-tal{font:600 20px/1 var(--mono);width:4.2em;min-height:42px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;background:rgba(10,14,22,.55);color:var(--fg);text-align:right;-moz-appearance:textfield}
.nd-tal::-webkit-outer-spin-button,.nd-tal::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.nd-tal:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.2)}
.nd-schuif{position:relative;height:56px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.nd-schuif:focus-visible{border-radius:12px}
.nd-rail{position:absolute;left:35px;right:35px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--line);overflow:hidden}
.nd-rail i{position:absolute;inset:0;background:var(--lime);transform-origin:0 50%;transform:scaleX(.4)}
.nd-knop{position:absolute;left:0;top:50%;width:70px;height:42px;margin-top:-21px;border-radius:21px;display:flex;gap:14px;align-items:center;justify-content:center;
  background:var(--ivory);border:1.5px solid var(--ivory);box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
.nd-knop svg{width:6px;height:10px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nd-som{font:500 12.5px/1.6 var(--mono);letter-spacing:.04em;color:var(--fg-70);margin-top:10px;overflow-wrap:anywhere}
.nd-dagen-som{font:500 11.5px/1.6 var(--mono);letter-spacing:.04em;color:var(--fg-55)}
.nd-uitleg{font-size:14.5px;line-height:1.55;color:var(--fg-70);margin-top:6px;max-width:52ch}
.nd-reken .nd-uitleg{max-width:52ch}
.nd-o-voetregel{font-size:13px;line-height:1.5;color:var(--fg-55)}

/* ---------- de lijst (ingeklapt in de briefing) ---------- */
.nd-papier{padding:0 16px 16px}
.nd-print-kop{display:none}
.nd-lijst{list-style:none;counter-reset:nd;padding:0;margin:0;display:flex;flex-direction:column}
.nd-item{counter-increment:nd;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 10px;padding:14px 0;border-top:1px solid var(--line)}
.nd-item::before{content:counter(nd,decimal-leading-zero);grid-row:span 2;font:500 13px/1.6 var(--mono);color:var(--peri)}
.nd-item-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.nd-item-kop b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(18px,1.6vw,22px);line-height:1.12}
.nd-item-tal{font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--fg-70)}
.nd-item-bib{font-size:15px;line-height:1.5;color:var(--fg-70)}
.nd-item-bib a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:4px;text-decoration-thickness:1.5px}
.nd-item-bib a:hover{color:var(--lime)}
.nd-item-lbl{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-right:6px}
.nd-item-bib.is-nog{color:var(--fg-55);font-style:italic}
.nd-samen{margin-top:12px;font:500 13px/1.6 var(--mono);letter-spacing:.03em;color:var(--fg-70)}
.nd-leeg{padding:18px 0;color:var(--fg-55)}
.nd-slot{margin-top:clamp(28px,3.6vw,48px)}
.nd-podium .nd-slot{grid-template-columns:minmax(0,1fr)}
.nd-podium .nd-slot .cta-act .btn{width:100%}

/* ---------- de ochtenden: vijf berichten van 07:00, op ivoor papier, veegbaar ---------- */
.nd-ochtend{position:relative;max-width:760px}
.nd-o-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.nd-o-tabs{display:flex;gap:6px;min-width:0}
.nd-o-tab{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-70);min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:transparent;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.nd-o-tab:hover{color:var(--fg);border-color:var(--peri)}
.nd-o-tab[aria-selected="true"]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.nd-o-pijlen{display:flex;gap:8px;flex:none}
.nd-o-pijl{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);display:grid;place-items:center;cursor:pointer}
.nd-o-pijl svg{width:8px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nd-o-pijl:hover:not(:disabled){border-color:var(--peri)}
.nd-o-pijl:disabled{opacity:.32;cursor:default}
.nd-o-spoor{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px;padding-bottom:2px}
.nd-o-spoor::-webkit-scrollbar{display:none}
.nd-o-spoor:focus-visible{outline:2px solid var(--peri);outline-offset:4px}
.nd-o-spoor>.nd-mail{scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
.nd-o-spoor>.nd-mail:not(.is-nu){content-visibility:auto;contain-intrinsic-size:auto 440px} /* de ochtenden naast de voorliggende: pas opmaken als ze in beeld komen */
.nd-o-nacht{margin-top:6px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(10,14,22,.52)}
.nd-o-jij:empty{display:none}
.nd-o-week{margin-top:16px;font-size:16.5px;line-height:1.5;color:var(--fg-70)}
.nd-o-week b{color:var(--fg);font-weight:600}
.nd-mail{background:#F7F6F2;color:#0A0E16;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(244,243,239,.12)}
.nd-mail-kop{padding:18px clamp(16px,2.4vw,26px) 14px;border-bottom:1px solid rgba(10,14,22,.1)}
.nd-mail-van{display:flex;align-items:center;gap:12px;min-width:0}
.nd-mail-av{flex:none;width:38px;height:38px;border-radius:50%;background:#0A0E16;display:grid;place-items:center}
.nd-mail-wie{display:flex;flex-direction:column;gap:2px;min-width:0}
.nd-mail-wie b{font:700 15px/1.2 var(--body)}
.nd-mail-wie small{font-size:13px;color:rgba(10,14,22,.6)}
.nd-mail-tijd{margin-left:auto;text-align:right;font:500 11.5px/1.4 var(--mono);letter-spacing:.04em;color:rgba(10,14,22,.62)}
.nd-mail-ond{margin-top:14px;font:700 clamp(21px,2.1vw,27px)/1.2 var(--body);font-stretch:100%;font-variation-settings:normal;text-transform:none;letter-spacing:-.01em;color:#0A0E16}
.nd-mail-body{padding:8px clamp(16px,2.4vw,26px) 20px}
.nd-o-lijst{list-style:none;padding:0;margin:0}
.nd-o-lijst li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px dashed rgba(10,14,22,.14)}
.nd-o-lijst li:first-child{border-top:0}
.nd-o-u{font:600 14px/1.3 var(--mono);color:#1436F5;font-variant-numeric:tabular-nums;white-space:nowrap}
.nd-o-t{font-size:16.5px;line-height:1.45}
.nd-o-leeg{display:block!important;color:rgba(10,14,22,.6)}
.nd-o-jij{margin-top:12px;padding:12px 14px;border-radius:10px;background:#E6F6BD;font-size:16.5px;line-height:1.45}
.nd-o-jij b{font-weight:700}
.nd-deel{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:860px){.nd-deel{width:100%}.nd-deel .btn{flex:1 1 180px}}
.nd-deel-melding{color:var(--fg-70);min-height:0}
.nd-deel-melding:empty{display:none}
.nd-deel-veld{display:block;width:100%;margin-top:6px;font:13px/1.3 var(--mono);min-height:42px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;background:rgba(10,14,22,.55);color:var(--fg)}
@media(max-width:560px){.nd-mail-van{flex-wrap:wrap}.nd-mail-tijd{margin-left:50px;text-align:left;width:100%}.nd-o-lijst li{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .nd-o-spoor{grid-auto-columns:calc(100% - 20px);gap:10px}.nd-o-pijlen{display:none}.nd-o-tabs{gap:4px;width:100%;justify-content:space-between}.nd-o-tab{font-size:11px;padding:0 8px;min-height:36px;letter-spacing:.03em}}
@media(prefers-reduced-motion:reduce){.nd-blok::after,.nd-chip,.nd-doel{transition:none!important}}

/* ---------- de doorlichting ---------- */
.nd-offer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.nd-offer-head h2{font-size:clamp(36px,4.4vw,68px);margin-top:14px}
.nd-offer-head .sub{margin-top:18px;max-width:52ch;color:var(--fg-70);font-size:17px}
.nd-offer-act{margin-top:24px}
@media(max-width:960px){.nd-offer{grid-template-columns:minmax(0,1fr)}.nd-offer-act .btn{width:100%}}
.nd-others{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.nd-others{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.nd-others{grid-template-columns:minmax(0,1fr)}}

/* ---------- op papier: de ochtend die voorligt, het weektotaal, de slotregel en de lijst, op één A4 ---------- */
@page{size:A4;margin:12mm 15mm 13mm}
@media print{
  html,body{background:#fff!important;color:#0A0E16}
  body::before,body::after{display:none}
  :root{--fg:#0A0E16;--fg-70:rgba(10,14,22,.78);--fg-55:rgba(10,14,22,.62);--line:rgba(10,14,22,.22);--line-soft:rgba(10,14,22,.12);--lime:#0A0E16;--peri:#1436F5}
  .skip,.top,.foot,.sticky-cta,.sheet-root,main > section,.nd-hero,.nd-held,.nd-hero-act,.nd-weeksec > .sec-head,.nd-filter,.nd-werk,.nd-week-act,.nd-slot,
  .nd-brief-kop .sub,.nd-brief-kop .kicker,.nd-o-nav,.nd-klep > summary,[data-reken-klep],.nd-o-voetregel{display:none!important}
  .nd-podium{display:block}
  .nd-weeksec{border:0;padding:0}
  .js .nd-brief,.nd-brief{display:flex!important;height:auto!important;overflow:visible!important;visibility:visible!important;opacity:1!important;transform:none!important;margin:0;gap:3mm}
  .nd-brief-kop h2{font-size:17pt;color:#0A0E16;margin:0}
  .nd-brief-kop h2 em{color:#0A0E16}
  .nd-ochtend{max-width:none}
  .nd-mail{box-shadow:none;border:1.5px solid #0A0E16;border-radius:8px;background:#fff}
  .nd-o-spoor{display:block;overflow:visible}
  .nd-o-spoor>.nd-mail:not(.is-nu){display:none}
  .nd-o-week{margin-top:2mm;font-size:9.5pt}
  .nd-mail-kop{padding:3mm 5mm 2.5mm}.nd-mail-body{padding:1mm 5mm 3mm}
  .nd-mail-ond{margin-top:2mm;font-size:15pt}.nd-o-t{font-size:10.5pt}
  .nd-o-lijst li{padding:1.4mm 0}
  .nd-o-jij{margin-top:2mm;padding:2mm 3mm;background:#fff;border:1px solid #0A0E16;font-size:10.5pt}
  .nd-slotregel{padding:2.5mm 4mm;border-radius:6px}
  .nd-dagen{font-size:11pt}.nd-dagen b{font-size:15pt;color:#0A0E16}.nd-ueuro{font-size:10pt}.nd-ueuro b{font-size:12pt}
  .nd-klep{border:0}
  .nd-papier{padding:0}
  .nd-print-kop{display:block;margin:2mm 0 1mm;font:700 13pt/1.2 var(--body);color:#0A0E16}
  .nd-item{break-inside:avoid;padding:1.5mm 0;gap:0 8px;grid-template-columns:28px minmax(0,1fr)}
  .nd-item::before{font-size:8.5pt}
  .nd-item-kop b{font-size:10.5pt}.nd-item-tal{font-size:8pt}
  .nd-item-bib{font-size:8.5pt;line-height:1.35}
  .nd-samen{margin-top:2mm;font-size:8.5pt}
  .nd-item-bib a{text-decoration:none}
  .nd-item-bib a::after{content:" (www.aichampions.nl" attr(href) ")";font:400 7.5pt/1.4 var(--mono);color:rgba(10,14,22,.62);overflow-wrap:anywhere}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}