/* ==========================================================================
   NewDegree, sectiebibliotheek versie 3
   Bevat GEEN kleurwaarden. Alles verwijst naar tokens.css, behalve #fff.
   Voorvoegsel nd3- zodat niets botst met de klassen uit thema 2.1.1
   zolang de oude en de nieuwe secties naast elkaar bestaan.
   ========================================================================== */

/* --- basis ---------------------------------------------------------------- */
.nd3 *{box-sizing:border-box}
.nd3{background:var(--nd-pagina);color:var(--nd-tekst);font-family:var(--nd-font);
     font-size:var(--nd-t-m);line-height:var(--nd-lh-tekst);-webkit-font-smoothing:antialiased}
/* Deze vier regels zetten bewust ook font-family, text-transform en font-size,
   omdat nd-legacy.css h1, h2, h3 en p als element-selector opmaakt (Poiret One,
   hoofdletters, 1,07rem). Zonder deze regels zou een nd3-pagina die oude
   koppen overnemen. Niet weghalen zolang nd-legacy.css bestaat. */
.nd3 h1,.nd3 h2,.nd3 h3,.nd3 h4{margin:0;font-family:var(--nd-font-display);
     font-weight:800;text-transform:none;line-height:var(--nd-lh-kop);letter-spacing:var(--nd-sp-kop)}
.nd3 p{margin:0 0 1em;font-size:var(--nd-t-m)}
.nd3 p:last-child{margin-bottom:0}
.nd3-footer p{font-size:var(--nd-t-s)}
.nd3-wrap{max-width:var(--nd-maxw);margin:0 auto;padding:0 var(--nd-gutter)}
.nd3-sec{padding:var(--nd-sectie) 0}
.nd3-sec--lijn{border-top:1px solid var(--nd-lijn)}
.nd3-kop-blok{max-width:44em;margin-bottom:calc(var(--nd-gap) * 2)}
.nd3-eyebrow{font-size:var(--nd-t-xs);font-weight:800;letter-spacing:var(--nd-sp-label);
     text-transform:uppercase;color:var(--nd-tekst-zacht);margin-bottom:14px}
.nd3-h2{font-size:var(--nd-t-h2)}
.nd3-lead{font-size:var(--nd-t-l);color:var(--nd-tekst-zacht);margin-top:15px}
.nd3-streep{width:52px;height:3px;border-radius:2px;background:var(--nd-accent);margin:18px 0}

/* --- knoppen -------------------------------------------------------------- */
.nd3-btn{display:inline-block;font:inherit;font-size:var(--nd-t-s);font-weight:700;
     padding:13px 24px;border-radius:var(--nd-radius-pil);text-decoration:none;
     background:var(--nd-actie);color:#fff;border:1px solid var(--nd-actie);cursor:pointer;
     transition:background .15s ease}
.nd3-btn:hover{background:var(--nd-actie-hover);border-color:var(--nd-actie-hover)}
.nd3-btn--lijn{background:transparent;color:var(--nd-tekst);border-color:var(--nd-tekst)}
.nd3-btn--lijn:hover{background:var(--nd-tekst);color:var(--nd-pagina)}
.nd3-btn--diep{background:transparent;color:var(--nd-op-diep);border-color:var(--nd-op-diep-lijn)}
.nd3-btn--diep:hover{background:var(--nd-op-diep);color:var(--nd-diep)}
.nd3-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nd3-link{font-size:var(--nd-t-s);font-weight:700;color:var(--nd-actie);text-decoration:none}
.nd3-link:hover{text-decoration:underline}

/* --- koptekst en menu ----------------------------------------------------- */
.nd3-header{background:var(--nd-pagina);border-bottom:1px solid var(--nd-lijn);
     position:sticky;top:0;z-index:60}
.nd3-header .nd3-wrap{display:flex;align-items:center;gap:24px;height:76px}
.nd3-logo{font-weight:800;letter-spacing:.02em;font-size:15px;line-height:1.05;text-transform:uppercase;text-decoration:none;color:var(--nd-tekst)}
.nd3-logo span{display:block}
.nd3-nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nd3-nav a{font-size:15px;font-weight:600;color:var(--nd-tekst);text-decoration:none;padding:8px 12px;border-radius:var(--nd-radius-s)}
.nd3-nav a:hover{color:var(--nd-actie)}
.nd3-nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--nd-accent)}
.nd3-taal{font-size:12.5px;font-weight:700;color:var(--nd-tekst-zacht);letter-spacing:.06em}
.nd3-taal b{color:var(--nd-tekst)}
@media(max-width:900px){.nd3-nav{display:none}}

/* --- hero ----------------------------------------------------------------- */
.nd3-hero{padding:clamp(48px,7vw,92px) 0 clamp(44px,6vw,76px)}
.nd3-hero h1{font-size:var(--nd-t-h1);max-width:19em}
.nd3-hero .nd3-lead{max-width:34em}
.nd3-hero .nd3-btns{margin-top:26px}
.nd3-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.nd3-hero__beeld{aspect-ratio:4/3;border-radius:var(--nd-radius-l);overflow:hidden;
     background:var(--nd-vlak);border:1px solid var(--nd-lijn)}
.nd3-hero__beeld img{display:block;width:100%;height:100%;object-fit:cover}
.nd3-hero__beeld--staand{aspect-ratio:4/5}
.nd3-hero__beeld--foto{background:none;border:0}
@media(max-width:860px){.nd3-hero__grid{grid-template-columns:1fr}}

/* --- herkenning, drie korte regels --------------------------------------- */
.nd3-herken{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nd-gap)}
.nd3-herken div{padding-top:18px;border-top:2px solid var(--nd-accent)}
.nd3-herken h4{font-size:var(--nd-t-h4);margin-bottom:7px}
.nd3-herken p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
@media(max-width:760px){.nd3-herken{grid-template-columns:1fr}}

/* --- drieluik, de opleverbelofte ----------------------------------------- */
.nd3-drieluik{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nd-gap)}
.nd3-luik{background:var(--nd-vlak);border:1px solid var(--nd-lijn);border-radius:var(--nd-radius);padding:28px 26px}
.nd3-luik .nr{font-size:var(--nd-t-xs);font-weight:800;letter-spacing:var(--nd-sp-label);
     text-transform:uppercase;color:var(--nd-accent);margin-bottom:12px}
.nd3-luik h3{font-size:var(--nd-t-h3);margin-bottom:9px}
.nd3-luik p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
@media(max-width:760px){.nd3-drieluik{grid-template-columns:1fr}}

/* --- aanbodladder --------------------------------------------------------- */
.nd3-as{display:flex;justify-content:space-between;font-size:var(--nd-t-xs);font-weight:800;
     letter-spacing:var(--nd-sp-label);text-transform:uppercase;color:var(--nd-tekst-zacht);margin-bottom:16px}
.nd3-rung{display:grid;grid-template-columns:44px 1fr 224px;gap:22px;align-items:start;
     background:var(--nd-vlak);border:1px solid var(--nd-lijn);border-radius:var(--nd-radius);
     padding:24px 26px;margin-bottom:12px;text-decoration:none;color:inherit}
.nd3-rung:hover{border-color:var(--nd-tekst)}
.nd3-rung__nr{width:38px;height:38px;border-radius:50%;background:var(--nd-vlak-wit);
     border:1px solid var(--nd-lijn);display:flex;align-items:center;justify-content:center;
     font-weight:800;font-size:15px;color:var(--nd-accent)}
.nd3-rung--nu{border-color:var(--nd-tekst);border-width:2px}
.nd3-rung--nu .nd3-rung__nr{background:var(--nd-accent);border-color:var(--nd-accent);color:#fff}
.nd3-rung h3{font-size:var(--nd-t-h3);margin-bottom:6px}
.nd3-rung__wie{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
     color:var(--nd-tekst-zacht);margin-bottom:10px}
.nd3-rung p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
.nd3-rung__prijs{text-align:right;font-size:var(--nd-t-s)}
.nd3-rung__prijs b{display:block;font-size:20px;letter-spacing:var(--nd-sp-kop)}
.nd3-rung__prijs span{color:var(--nd-tekst-zacht);font-size:13px}
@media(max-width:820px){
  .nd3-rung{grid-template-columns:1fr;gap:12px}
  .nd3-rung__prijs{text-align:left}
}

/* --- kaartenrij ----------------------------------------------------------- */
.nd3-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nd-gap)}
.nd3-kaarten--2{grid-template-columns:repeat(2,1fr)}
.nd3-kaart{background:var(--nd-vlak);border:1px solid var(--nd-lijn);border-radius:var(--nd-radius);
     padding:26px;display:flex;flex-direction:column}
.nd3-kaart h3{font-size:var(--nd-t-h3);margin-bottom:8px}
.nd3-kaart__meta{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
     color:var(--nd-tekst-zacht);margin-bottom:12px}
.nd3-kaart p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
.nd3-kaart__voet{margin-top:auto;padding-top:18px}
@media(max-width:820px){.nd3-kaarten,.nd3-kaarten--2{grid-template-columns:1fr}}

/* --- stappen -------------------------------------------------------------- */
.nd3-stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--nd-gap) * 1.6)}
.nd3-stap__nr{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--nd-accent);line-height:1}
.nd3-stap h4{font-size:var(--nd-t-h4);margin:12px 0 7px}
.nd3-stap p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
@media(max-width:760px){.nd3-stappen{grid-template-columns:1fr}}

/* --- tegels, afleveringen en premium ------------------------------------- */
.nd3-tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--nd-gap)}
.nd3-tegels--3{grid-template-columns:repeat(3,1fr)}
.nd3-tegel{text-decoration:none;color:inherit;display:block}
.nd3-tegel img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
     border-radius:var(--nd-radius-s);border:1px solid var(--nd-lijn)}
.nd3-tegel--diep img{border-color:var(--nd-diep)}
.nd3-tegel__nr{font-size:var(--nd-t-xs);font-weight:800;letter-spacing:var(--nd-sp-label);
     text-transform:uppercase;color:var(--nd-tekst-zacht);margin:11px 0 3px}
.nd3-tegel h4{font-size:var(--nd-t-h4)}
.nd3-tegel p{font-size:13.5px;color:var(--nd-tekst-zacht);margin-top:4px}
.nd3-tegel:hover h4{color:var(--nd-actie)}
@media(max-width:860px){.nd3-tegels{grid-template-columns:repeat(2,1fr)}.nd3-tegels--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.nd3-tegels,.nd3-tegels--3{grid-template-columns:1fr}}

/* --- prijzen -------------------------------------------------------------- */
.nd3-prijzen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nd-gap)}
.nd3-prijs{background:var(--nd-vlak);border:1px solid var(--nd-lijn);border-radius:var(--nd-radius);
     padding:28px 26px;display:flex;flex-direction:column}
.nd3-prijs--nadruk{border-color:var(--nd-tekst);border-width:2px}
.nd3-prijs__label{font-size:var(--nd-t-xs);font-weight:800;letter-spacing:var(--nd-sp-label);
     text-transform:uppercase;color:var(--nd-tekst-zacht);margin-bottom:12px}
.nd3-prijs__bedrag{font-size:34px;font-weight:800;letter-spacing:var(--nd-sp-kop);line-height:1}
.nd3-prijs__bij{font-size:13.5px;color:var(--nd-tekst-zacht);margin-top:7px}
.nd3-prijs ul{list-style:none;margin:20px 0 0;padding:0}
.nd3-prijs li{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht);padding:9px 0 9px 20px;
     border-top:1px solid var(--nd-lijn-zacht);position:relative}
.nd3-prijs li::before{content:'';position:absolute;left:0;top:17px;width:7px;height:7px;
     border-radius:50%;background:var(--nd-accent)}
.nd3-prijs__voet{margin-top:auto;padding-top:20px}
@media(max-width:820px){.nd3-prijzen{grid-template-columns:1fr}}

/* --- staffeltabel --------------------------------------------------------- */
.nd3-tabel{width:100%;border-collapse:collapse;background:var(--nd-vlak);
     border:1px solid var(--nd-lijn);border-radius:var(--nd-radius);overflow:hidden;font-size:var(--nd-t-s)}
.nd3-tabel th,.nd3-tabel td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--nd-lijn-zacht)}
.nd3-tabel th{font-size:var(--nd-t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
     color:var(--nd-tekst-zacht);background:var(--nd-vlak-wit)}
.nd3-tabel td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.nd3-tabel th:not(:first-child){text-align:right}
.nd3-tabel tr:last-child td{border-bottom:0}
.nd3-tabel tr.is-nadruk td{font-weight:700;background:var(--nd-accent-zacht)}

/* --- agenda --------------------------------------------------------------- */
.nd3-agenda__item{display:grid;grid-template-columns:132px 1fr 200px;gap:24px;
     padding:26px 0;border-top:1px solid var(--nd-lijn);align-items:start}
.nd3-agenda__item:last-child{border-bottom:1px solid var(--nd-lijn)}
.nd3-datum{font-size:var(--nd-t-h3);font-weight:800;letter-spacing:var(--nd-sp-kop);line-height:1.1}
.nd3-datum span{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em;
     text-transform:uppercase;color:var(--nd-tekst-zacht);margin-top:6px}
.nd3-agenda__item h3{font-size:var(--nd-t-h3);margin-bottom:6px}
.nd3-agenda__item p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
.nd3-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.09em;
     text-transform:uppercase;padding:4px 11px;border-radius:var(--nd-radius-pil);
     border:1px solid var(--nd-lijn);color:var(--nd-tekst-zacht);margin-bottom:10px}
.nd3-agenda__actie{text-align:right}
@media(max-width:820px){
  .nd3-agenda__item{grid-template-columns:1fr;gap:10px}
  .nd3-agenda__actie{text-align:left}
}

/* --- quote ---------------------------------------------------------------- */
.nd3-quote{max-width:38em;border-left:3px solid var(--nd-accent);padding-left:26px}
.nd3-quote p{font-size:var(--nd-t-h3);font-weight:600;letter-spacing:var(--nd-sp-kop);line-height:1.3}
.nd3-quote cite{display:block;margin-top:16px;font-style:normal;font-size:var(--nd-t-s);
     font-weight:700;color:var(--nd-tekst-zacht)}

/* --- veelgestelde vragen -------------------------------------------------- */
.nd3-faq{max-width:52em}
.nd3-faq details{border-top:1px solid var(--nd-lijn)}
.nd3-faq details:last-of-type{border-bottom:1px solid var(--nd-lijn)}
.nd3-faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
     font-size:var(--nd-t-h4);font-weight:700;letter-spacing:var(--nd-sp-kop)}
.nd3-faq summary::-webkit-details-marker{display:none}
.nd3-faq summary::after{content:'+';position:absolute;right:8px;top:17px;font-size:24px;
     font-weight:600;color:var(--nd-accent);line-height:1}
.nd3-faq details[open] summary::after{content:'\2013'}
.nd3-faq details p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht);padding:0 3em 22px 0;margin:0}

/* --- formulier ------------------------------------------------------------ */
.nd3-form{background:var(--nd-vlak);border:1px solid var(--nd-lijn);border-radius:var(--nd-radius-l);
     padding:clamp(26px,4vw,40px)}
.nd3-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nd3-veld{display:flex;flex-direction:column;gap:7px}
.nd3-veld--vol{grid-column:1 / -1}
.nd3-veld label{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--nd-tekst-zacht)}
.nd3-veld input,.nd3-veld select,.nd3-veld textarea{font:inherit;font-size:var(--nd-t-s);
     padding:13px 16px;border:1px solid var(--nd-lijn);border-radius:var(--nd-radius-pil);
     background:var(--nd-vlak-wit);color:var(--nd-tekst)}
.nd3-veld textarea{border-radius:var(--nd-radius);min-height:110px;resize:vertical}
.nd3-veld input:focus,.nd3-veld select:focus,.nd3-veld textarea:focus{outline:2px solid var(--nd-accent);outline-offset:1px}
.nd3-form__voet{margin-top:20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.nd3-form__voet small{font-size:13px;color:var(--nd-tekst-zacht)}
@media(max-width:700px){.nd3-form__grid{grid-template-columns:1fr}}

/* --- zwarte band, maximaal een per pagina -------------------------------- */
.nd3-band{background:var(--nd-diep);color:var(--nd-op-diep);border-radius:var(--nd-radius-l);
     padding:clamp(34px,5vw,54px) clamp(26px,4vw,48px)}
.nd3-band h2{font-size:var(--nd-t-h2);color:var(--nd-op-diep);max-width:24em}
.nd3-band p{color:var(--nd-op-diep-zacht);max-width:36em;margin-top:14px}
.nd3-band .nd3-eyebrow{color:var(--nd-op-diep-zacht)}
.nd3-band .nd3-btns{margin-top:24px}
.nd3-band__vol{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
     padding-left:var(--nd-gutter);padding-right:var(--nd-gutter);border-radius:0}

/* --- voettekst ------------------------------------------------------------ */
.nd3-footer{background:var(--nd-diep);color:var(--nd-op-diep-zacht);padding:56px 0 34px;font-size:var(--nd-t-s)}
.nd3-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--nd-gap)}
.nd3-footer h4{font-size:var(--nd-t-xs);font-weight:800;letter-spacing:var(--nd-sp-label);
     text-transform:uppercase;color:var(--nd-op-diep);margin-bottom:14px}
.nd3-footer a{color:var(--nd-op-diep-zacht);text-decoration:none;display:block;padding:4px 0}
.nd3-footer a:hover{color:var(--nd-op-diep);text-decoration:underline}
.nd3-footer__onder{margin-top:38px;padding-top:22px;border-top:1px solid var(--nd-op-diep-scheid);
     display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px}
@media(max-width:860px){.nd3-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.nd3-footer__grid{grid-template-columns:1fr}}

/* --- Gutenberg-correctie uit thema 2.1.1, blijft nodig ------------------- */
.nd3 .wp-block-group>.wp-block-group__inner-container{display:contents}
.nd3 p:empty{display:none}

/* --- toegankelijkheid ----------------------------------------------------- */
.nd3 a:focus-visible,.nd3 button:focus-visible,.nd3 summary:focus-visible{
     outline:2px solid var(--nd-accent);outline-offset:2px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.nd3 *{transition:none !important;animation:none !important}}

/* --- mobiel menu, hangt aan de bestaande navtoggle uit theme.js ---------- */
.nd3-header .navtoggle{display:none;width:42px;height:42px;border:1px solid var(--nd-lijn);
     border-radius:50%;background:var(--nd-vlak);cursor:pointer;padding:0;
     flex-direction:column;gap:4px;align-items:center;justify-content:center}
.nd3-header .navtoggle span{display:block;width:17px;height:2px;background:var(--nd-tekst);border-radius:2px}
.nd3-header .header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nd3-header .nd3-nav{margin-left:0}
@media(max-width:900px){
  .nd3-header .navtoggle{display:flex}
  .nd3-header .nd3-nav{display:none;position:absolute;left:0;right:0;top:100%;
       flex-direction:column;align-items:stretch;gap:0;
       background:var(--nd-pagina);border-bottom:1px solid var(--nd-lijn);
       padding:8px var(--nd-gutter) 18px}
  #hdr.open .nd3-nav{display:flex}
  .nd3-header .nd3-nav a{padding:14px 0;border-bottom:1px solid var(--nd-lijn-zacht);border-radius:0}
  .nd3-header .nd3-nav .nd3-taal{padding-top:14px}
  .nd3-header{position:relative}
}
@media(max-width:520px){
  .nd3-header .nd3-btn{display:none}
}

/* --- menu uit wp_nav_menu: dezelfde opmaak als de losse links ------------- */
.nd3-nav ul.nd3-menu{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.nd3-nav ul.nd3-menu li{margin:0}
.nd3-nav ul.nd3-menu a{display:block;font-size:15px;font-weight:600;color:var(--nd-tekst);
     text-decoration:none;padding:8px 12px;border-radius:var(--nd-radius-s)}
.nd3-nav ul.nd3-menu a:hover{color:var(--nd-actie)}
.nd3-nav ul.nd3-menu li.current-menu-item>a{box-shadow:inset 0 -2px 0 var(--nd-accent)}
@media(max-width:900px){
  .nd3-nav ul.nd3-menu{flex-direction:column;align-items:stretch;gap:0}
  .nd3-nav ul.nd3-menu a{padding:14px 0;border-bottom:1px solid var(--nd-lijn-zacht);border-radius:0}
}

/* --- taalschakelaar van Polylang ------------------------------------------
   nd-legacy.css maakt hier een zwarte pil van (.lang .current-lang krijgt een
   inkt-achtergrond). In versie 3 is het gewoon tekst, dus die pil wordt hier
   expliciet teruggedraaid. Niet weghalen zolang nd-legacy.css bestaat.       */
.nd3-header .lang,.nd3-footer .lang{background:none;border:0;border-radius:0;padding:0;overflow:visible}
.nd3-header .lang{display:flex;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nd3-header .lang a{background:none;border-radius:0;padding:0;color:var(--nd-tekst-zacht);text-decoration:none}
.nd3-header .lang a.current-lang,.nd3-header .lang .current-lang a{background:none;color:var(--nd-tekst)}
.nd3-header .lang a:hover{color:var(--nd-actie)}
.nd3-footer .lang{display:flex;flex-direction:column;text-transform:none;font-size:var(--nd-t-s);font-weight:500}
.nd3-footer .lang a{background:none;border-radius:0;padding:4px 0;color:var(--nd-op-diep-zacht);text-decoration:none}
.nd3-footer .lang a.current-lang,.nd3-footer .lang .current-lang a{background:none;color:var(--nd-op-diep)}
.nd3-footer .lang a:hover{color:var(--nd-op-diep);text-decoration:underline}

/* ==========================================================================
   Beeld, toegevoegd in 3.1.0
   De site had te weinig beeld en de donkere blokken waren te hard. Deze
   bouwstenen brengen de echte fotografie terug en geven de donkere vlakken
   een foto in plaats van een dichte kleur.
   ========================================================================== */

/* --- beeldband: foto over de volle breedte met een sluier erover ---------- */
.nd3-beeldband{position:relative;overflow:hidden;
     margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
     min-height:clamp(360px,44vw,540px);display:flex;align-items:center}
.nd3-beeldband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.nd3-beeldband::after{content:'';position:absolute;inset:0;background:var(--nd-sluier);z-index:1}
.nd3-beeldband__in{position:relative;z-index:2;max-width:var(--nd-maxw);width:100%;
     margin:0 auto;padding:clamp(34px,5vw,64px) var(--nd-gutter)}
.nd3-beeldband h2{font-size:var(--nd-t-h2);color:var(--nd-op-diep);max-width:22em}
.nd3-beeldband p{color:var(--nd-op-diep-zacht);max-width:34em;margin-top:14px}
.nd3-beeldband .nd3-eyebrow{color:var(--nd-op-diep-zacht)}
.nd3-beeldband .nd3-btns{margin-top:24px}
.nd3-beeldband--kaart{margin-left:0;margin-right:0;border-radius:var(--nd-radius-l)}

/* --- fotostrip ------------------------------------------------------------ */
.nd3-fotostrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.nd3-fotostrip figure{margin:0}
.nd3-fotostrip img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
     border-radius:var(--nd-radius-s)}
.nd3-fotostrip figure:nth-child(even) img{aspect-ratio:3/4;margin-top:18px}
.nd3-fotostrip figcaption{font-size:12.5px;color:var(--nd-tekst-zacht);margin-top:8px}
.nd3-fotostrip--breed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
     padding:0 var(--nd-gutter)}
@media(max-width:760px){
  .nd3-fotostrip{grid-template-columns:repeat(2,1fr)}
  .nd3-fotostrip figure:nth-child(even) img{margin-top:0}
}

/* --- twee makers ---------------------------------------------------------- */
.nd3-team{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--nd-gap) * 1.6)}
.nd3-maker{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start}
.nd3-maker img{width:96px;height:96px;border-radius:50%;object-fit:cover;
     border:1px solid var(--nd-lijn)}
.nd3-maker h3{font-size:var(--nd-t-h4);margin-bottom:4px}
.nd3-maker .rol{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
     color:var(--nd-tekst-zacht);margin-bottom:9px}
.nd3-maker p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
@media(max-width:760px){.nd3-team{grid-template-columns:1fr}}

/* --- beeld bij een agenda-item ------------------------------------------- */
.nd3-agenda__item--beeld{grid-template-columns:132px 168px 1fr 200px}
.nd3-agenda__beeld img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
     border-radius:var(--nd-radius-s)}
@media(max-width:1020px){
  .nd3-agenda__item--beeld{grid-template-columns:132px 1fr 200px}
  .nd3-agenda__beeld{display:none}
}
@media(max-width:820px){.nd3-agenda__item--beeld{grid-template-columns:1fr}
  .nd3-agenda__beeld{display:block;max-width:280px}}

/* --- beeld bij een sport van de ladder ----------------------------------- */
.nd3-rung--beeld{grid-template-columns:44px 132px 1fr 224px}
.nd3-rung__beeld img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
     border-radius:var(--nd-radius-s)}
@media(max-width:1020px){
  .nd3-rung--beeld{grid-template-columns:44px 1fr 224px}
  .nd3-rung__beeld{display:none}
}
@media(max-width:820px){.nd3-rung--beeld{grid-template-columns:1fr}
  .nd3-rung__beeld{display:block;max-width:240px}}

/* --- beeld in een kaart --------------------------------------------------- */
.nd3-kaart__beeld{margin:-26px -26px 20px}
.nd3-kaart__beeld img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
     border-radius:var(--nd-radius) var(--nd-radius) 0 0}

/* --- zachtere premium-tegel ---------------------------------------------- */
.nd3-tegel--diep img{border-color:var(--nd-diep-rand)}

/* ==========================================================================
   Toegevoegd in 3.3.0
   Reden: de afleveringen stonden in een raster van twaalf zonder seizoenen,
   en de pagina's zonder fotografie werden tekst-kaart-tekst-kaart. Dit zijn
   de bouwstenen om per seizoen een rij te zetten en om de app te laten zien
   in plaats van hem te beschrijven.
   ========================================================================== */

/* --- rij tegels die zich naar het aantal vormt ---------------------------
   Een raster met een vast aantal kolommen geeft rafelige rijen bij vijf,
   vier en drie tegels. Met flex en een gelijke basis staan ze altijd even
   breed en links uitgelijnd, ongeacht hoeveel er zijn.                    */
.nd3-tegels--rij{display:flex;flex-wrap:wrap;gap:var(--nd-gap)}
.nd3-tegels--rij>*{flex:1 1 190px;max-width:260px}
@media(max-width:640px){.nd3-tegels--rij>*{flex:1 1 140px;max-width:none}}

/* --- seizoensblok: kop links, tegels rechts ------------------------------ */
.nd3-seizoen{padding:30px 0;border-top:1px solid var(--nd-lijn)}
.nd3-seizoen:first-of-type{border-top:0;padding-top:0}
.nd3-seizoen__kop{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;
     justify-content:space-between;margin-bottom:20px}
.nd3-seizoen__kop h3{font-size:var(--nd-t-h3)}
.nd3-seizoen__kop .nr{font-size:var(--nd-t-xs);font-weight:800;letter-spacing:var(--nd-sp-label);
     text-transform:uppercase;color:var(--nd-accent);display:block;margin-bottom:6px}
.nd3-seizoen__kop .meta{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht)}
.nd3-seizoen__wat{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht);max-width:46em;margin-bottom:20px}

/* --- schermbeelden van de app -------------------------------------------- */
.nd3-schermen{display:grid;grid-template-columns:1.5fr 1fr 1.5fr;gap:var(--nd-gap);align-items:end}
.nd3-schermen figure{margin:0}
.nd3-schermen img{display:block;width:100%;height:auto;border-radius:var(--nd-radius-s)}
.nd3-schermen figcaption{font-size:13px;color:var(--nd-tekst-zacht);margin-top:10px}
@media(max-width:820px){.nd3-schermen{grid-template-columns:1fr}}

/* --- een gesprek laten zien: wat jij typt, wat je terugkrijgt ------------ */
.nd3-gesprek{max-width:46em}
.nd3-gesprek__vraag{font-size:var(--nd-t-s);font-weight:700;color:var(--nd-tekst-zacht);
     letter-spacing:.02em;margin-bottom:14px}
.nd3-bubbel{border:1px solid var(--nd-lijn);border-radius:var(--nd-radius);
     padding:18px 22px;margin-bottom:12px;background:var(--nd-vlak)}
.nd3-bubbel__wie{font-size:11px;font-weight:800;letter-spacing:var(--nd-sp-label);
     text-transform:uppercase;color:var(--nd-tekst-zacht);margin-bottom:8px}
.nd3-bubbel p{font-size:var(--nd-t-s);color:var(--nd-tekst)}
.nd3-bubbel--jij{background:var(--nd-vlak-wit);margin-left:0;margin-right:12%}
.nd3-bubbel--agent{border-left:3px solid var(--nd-accent);margin-left:12%;margin-right:0}
.nd3-bubbel--agent .nd3-bubbel__wie{color:var(--nd-accent)}
.nd3-gesprek__noot{font-size:13px;color:var(--nd-tekst-zacht);margin-top:14px}
@media(max-width:640px){
  .nd3-bubbel--jij{margin-right:0}
  .nd3-bubbel--agent{margin-left:0}
}

/* ==========================================================================
   Toegevoegd in 3.4.0
   Carlijn, 9 september 2026, na de eerste blik op de nieuwe pagina's:
   1. "tussen de headlines en de inleidingen zit heel weinig ruimte"
   2. "die vijf, vier, drie rijen zijn wel een beetje gek"
   3. "er zit nog een soort van kleurvlak achter de schermbeelden"
   4. "het boek staat nu half in beeld"
   ========================================================================== */

/* --- 1. ademruimte onder een kop -----------------------------------------
   De oorzaak: .nd3 p (0,1,1) is specifieker dan .nd3-lead (0,1,0), dus de
   marge boven elke inleiding werd overschreven door margin:0 0 1em. Daarom
   stond elke inleiding tegen zijn kop aan. Hieronder staat hij met gelijke
   specificiteit terug, plus wat lucht rond de losse koppen.               */
.nd3 .nd3-lead{margin-top:20px}
.nd3-hero .nd3-lead{margin-top:22px}
.nd3-kop-blok :is(h1,h2,h3)+p{margin-top:20px}
.nd3-band :is(h2,h3)+p,.nd3-beeldband :is(h2,h3)+p{margin-top:16px}
.nd3 .nd3-seizoen__wat{margin-top:16px;margin-bottom:26px}
.nd3-kop-blok{margin-bottom:calc(var(--nd-gap) * 2.2)}

/* --- 2. afleveringen: overal even grote kaders ---------------------------
   Een rij die zich naar het aantal tegels vormde gaf per seizoen een andere
   tegelbreedte: vijf smalle, vier bredere, drie brede. Nu is het raster
   vast op vijf kolommen, dus alle twaalf afleveringen zijn even groot en
   een seizoen met minder afleveringen houdt gewoon ruimte over.
   Op een telefoon wordt de rij een swipe, zodat een seizoen een seizoen
   blijft in plaats van een lange kolom.                                   */
.nd3-tegels--rij{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--nd-gap)}
.nd3-tegels--rij>*{flex:none;max-width:none}
@media(max-width:1080px){.nd3-tegels--rij{grid-template-columns:repeat(4,1fr)}}
@media(max-width:880px){.nd3-tegels--rij{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){
  .nd3-tegels--rij{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
       margin:0 calc(var(--nd-gutter) * -1);padding:0 var(--nd-gutter) 8px;
       -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .nd3-tegels--rij>*{flex:0 0 66%;scroll-snap-align:start}
}

/* Het seizoen zelf duidelijker afzetten: een rustig vlak met een kader,
   zodat je ziet waar seizoen 1 ophoudt en seizoen 2 begint.               */
.nd3-seizoen{padding:30px 32px 34px;border-top:0;border:1px solid var(--nd-lijn);
     border-radius:var(--nd-radius-l);background:var(--nd-vlak);margin-bottom:var(--nd-gap)}
.nd3-seizoen:first-of-type{padding-top:30px}
.nd3-seizoen:last-of-type{margin-bottom:0}
.nd3-seizoen__kop{justify-content:space-between}
.nd3-seizoen__kop .nr{font-size:var(--nd-t-s);letter-spacing:.1em}
@media(max-width:620px){.nd3-seizoen{padding:24px 20px 26px}}

/* --- 3. schermbeelden zonder vlak ----------------------------------------
   De beelden staan nu op de paginakleur (de achtergrond is er in het beeld
   zelf uitgehaald), dus ze hebben geen kader en geen eigen vlak meer nodig.
   De apparaten staan op een gelijke onderlijn, met de bijschriften onder
   elkaar op dezelfde hoogte.                                              */
.nd3-schermen{grid-template-columns:repeat(2,1fr);gap:calc(var(--nd-gap) * 1.5);align-items:stretch}
.nd3-schermen figure{display:grid;grid-template-rows:1fr auto;gap:12px}
.nd3-schermen__beeld{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/3}
.nd3-schermen__beeld img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:0}
.nd3-schermen figcaption{margin-top:0}
@media(max-width:760px){.nd3-schermen{grid-template-columns:1fr}
  .nd3-schermen__beeld{aspect-ratio:auto}}

/* --- 4. beeld dat heel moet blijven --------------------------------------
   Standaard snijdt een kaartbeeld bij (object-fit:cover), en dan staat een
   staand boek half buiten beeld. Met --vrij past het hele voorwerp in het
   kader, op de paginakleur, zonder kader eromheen.                        */
.nd3-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--nd-gap) * 1.6)}
.nd3-duo__beeld{aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:center}
.nd3-duo__beeld img{width:auto;height:auto;max-width:100%;max-height:100%}
.nd3-duo__meta{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
     color:var(--nd-tekst-zacht);margin:20px 0 8px}
.nd3-duo h3{font-size:var(--nd-t-h3)}
.nd3-duo p{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht);margin-top:10px}
.nd3-duo .nd3-btns{margin-top:18px}
@media(max-width:760px){.nd3-duo{grid-template-columns:1fr}}

/* Een hero met een beeld dat op de pagina zweeft in plaats van in een kader */
.nd3-hero__beeld--vrij{aspect-ratio:auto;background:none;border:0;border-radius:0;overflow:visible}
.nd3-hero__beeld--vrij img{width:100%;height:auto;object-fit:contain}

/* --- de winkel ------------------------------------------------------------
   De productenlijst van WooCommerce staat buiten de nd3-wrapper, dus die
   krijgt hier zijn eigen opmaak, met dezelfde tokens als de rest.
   Wat er verandert: een rustig raster van drie, gelijke beeldverhoudingen,
   een korte omschrijving onder de naam en geen sorteerbalk boven drie
   producten. Toegevoegd 9 september 2026.                                 */
.nd-shop .woocommerce-result-count,
.nd-shop .woocommerce-ordering{display:none}
.nd-shop ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nd-gap);
     list-style:none;margin:0;padding:0}
.nd-shop ul.products::before,.nd-shop ul.products::after{content:none}
.nd-shop ul.products li.product{width:auto;margin:0;padding:22px;float:none;clear:none;
     display:flex;flex-direction:column;background:var(--nd-vlak);
     border:1px solid var(--nd-lijn);border-radius:var(--nd-radius)}
.nd-shop ul.products li.product img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
     border-radius:var(--nd-radius-s);margin:0 0 16px}
.nd-shop ul.products li.product .woocommerce-loop-product__title{
     font-family:var(--nd-font-display);font-weight:800;text-transform:none;
     font-size:var(--nd-t-h4);line-height:var(--nd-lh-kop);letter-spacing:var(--nd-sp-kop);
     color:var(--nd-tekst);padding:0;margin:0 0 8px}
.nd-shop__kort{font-size:var(--nd-t-s);color:var(--nd-tekst-zacht);margin:0 0 14px;
     line-height:var(--nd-lh-tekst)}
.nd-shop ul.products li.product .price{font-size:var(--nd-t-s);font-weight:700;
     color:var(--nd-tekst);margin:0 0 18px}
.nd-shop ul.products li.product .button{margin-top:auto;align-self:flex-start}
@media(max-width:900px){.nd-shop ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.nd-shop ul.products{grid-template-columns:1fr}}

/* ==========================================================================
   Toegevoegd in 3.4.1
   Twee dingen uit de controle van 10 september: de hero van de Agent stond
   uit balans (kop over vier regels, beeld te klein), en de afleveringstitels
   in een seizoensrij lopen soms over twee regels, waardoor de tekst eronder
   niet op dezelfde hoogte begon.
   ========================================================================== */

/* Een hero met een zwevend beeld mag een bredere beeldkolom hebben: de kop
   krijgt dan minder regels en het apparaat is groot genoeg om te lezen. */
@media(min-width:861px){
  .nd3-hero__grid--vrij{grid-template-columns:1fr 1.02fr}
  .nd3-hero__grid--vrij h1{max-width:none}
}

/* Titel op twee regels reserveren, zodat de zinnen eronder uitlijnen.
   Alleen in een seizoensrij, want daar staan de tegels naast elkaar. */
@media(min-width:621px){
  .nd3-tegels--rij .nd3-tegel h4{min-height:2.4em}
}