/* ===========================================================
   Geeve Interim Logistics
   Huisstijl: UC Group (nachtblauw, oranje accent, petrolblauw)
   Grafische taal: ruime witruimte, schuine sectieranden,
   gelaagde kleurverlopen, strakke kaarten met lichte schaduw.
   =========================================================== */

:root{
  /* UC Group-kleuren */
  --navy:#0A1F2C;
  --navy-2:#102B3C;
  --navy-3:#163548;
  --orange:#F7961E;
  --orange-licht:#FFAE4A;
  --petrol:#006899;
  --petrol-licht:#0A86C0;
  --tag:#A1BDCA;
  --grijs:#878E9C;

  /* Vlakken en tekst */
  --bg:#FFFFFF;
  --panel:#F8FBFE;
  --panel-2:#F1F6FA;
  --ink:#0A1F2C;
  --muted:#55657A;
  --line:#E3EAF1;
  --line-sterk:#D3DEE8;
  --on-dark:#FFFFFF;
  --on-dark-muted:#A1BDCA;
  --line-donker:rgba(161,189,202,.20);

  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-hero:"Open Sans","DM Sans",system-ui,sans-serif;

  --radius:16px;
  --radius-s:10px;
  --schuin:3.2vw;              /* hoek van de schuine sectieranden */
  --soepel:cubic-bezier(.22,.61,.36,1);
  --kop-h:70px;

  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--petrol)}
p{margin:0}
h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance;font-weight:700}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.wrap{
  max-width:1160px;margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}

/* ---------- Typografie ---------- */
h2{font-family:var(--font-hero);font-weight:500;font-size:clamp(1.75rem,3.6vw,2.75rem);letter-spacing:-.025em}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.muted{color:var(--muted)}
.band.dark .muted{color:var(--on-dark-muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin:0;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px}
.band.light .eyebrow,.band:not(.dark) .eyebrow{color:var(--petrol)}
.band.light .eyebrow::before,.band:not(.dark) .eyebrow::before{background:var(--orange)}

.section-head{display:grid;gap:14px;max-width:62ch;margin-bottom:44px}
.prose{max-width:66ch;display:grid;gap:16px}
.prose p{color:var(--muted)}

/* ---------- Banden met schuine randen ---------- */
.band{padding-block:clamp(60px,8vw,110px);position:relative}
.band.light{background:var(--panel)}
.band.dark{
  background:
    radial-gradient(900px 480px at 85% 0%,rgba(0,104,153,.40),transparent 62%),
    radial-gradient(620px 380px at 8% 100%,rgba(247,150,30,.12),transparent 60%),
    var(--navy);
  color:var(--on-dark);
  margin-block:calc(var(--schuin) * -0.5);
  padding-block:calc(clamp(60px,8vw,110px) + var(--schuin));
  clip-path:polygon(0 var(--schuin),100% 0,100% calc(100% - var(--schuin)),0 100%);
}
.band.dark + .band.dark{margin-top:calc(var(--schuin) * -1.2)}
.band.dark h2{color:#fff}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:14px 24px;border-radius:8px;border:1.5px solid transparent;
  font:700 1rem/1.1 var(--font-body);text-decoration:none;cursor:pointer;
  transition:transform .22s var(--soepel),box-shadow .22s,background-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--orange);color:#0A1F2C}
.btn-primary:hover{background:var(--orange-licht);box-shadow:0 12px 28px -12px rgba(247,150,30,.75)}
.btn-secondary{background:var(--petrol);color:#fff}
.btn-secondary:hover{background:var(--petrol-licht);box-shadow:0 12px 28px -12px rgba(0,104,153,.7)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{background:rgba(127,127,127,.12)}
.hero-note{margin-top:26px;max-width:58ch;font-size:.9rem;line-height:1.65;color:var(--on-dark-muted);padding-top:20px;border-top:1px solid rgba(161,189,202,.22)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---------- Navigatiebalk ---------- */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(10,31,44,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-donker);
  color:#fff;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--navy)}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--kop-h);flex-wrap:wrap;padding-block:10px;
}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand .mark{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--orange),#E07C0B);
  color:#0A1F2C;font-weight:800;font-size:.85rem;
  box-shadow:0 6px 16px -8px rgba(247,150,30,.9);
}
.nav{display:flex;gap:2px 6px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:.95rem}
.nav a{
  display:block;padding:8px 12px;border-radius:8px;color:var(--tag);text-decoration:none;
  font-weight:500;transition:color .18s,background-color .18s;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.1)}
.lang{
  color:#fff;text-decoration:none;font-size:.82rem;font-weight:600;
  border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:7px 12px;
  transition:background-color .18s,border-color .18s;
}
.lang:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* ---------- Hero ---------- */
.hero,.page-hero,.bookhero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 76% 18%,rgba(0,104,153,.55),transparent 62%),
    radial-gradient(760px 480px at 92% 86%,rgba(247,150,30,.20),transparent 60%),
    radial-gradient(900px 520px at 4% 6%,rgba(22,53,72,.9),transparent 58%),
    linear-gradient(165deg,#0B2435 0%,var(--navy) 55%,#071722 100%);
  padding-block:clamp(56px,8vw,104px) calc(clamp(56px,8vw,104px) + var(--schuin));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--schuin)),0 100%);
  margin-bottom:calc(var(--schuin) * -0.5);
}
.hero::after,.page-hero::after,.bookhero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,150,30,.5),transparent);
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:48px;align-items:center}
.hero h1,.page-hero h1,.bookhero h1{
  font-family:var(--font-hero);font-weight:500;
  font-size:clamp(2.1rem,5.4vw,3.9rem);letter-spacing:-.03em;line-height:1.04;
  max-width:19ch;
}
.hero h1 strong,.bookhero h1 b{color:var(--orange);font-weight:700}
.hero .lead,.page-hero .lead,.bookhero .lead{
  font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--on-dark-muted);
  max-width:54ch;margin-top:22px;line-height:1.55;
}
.page-hero{padding-block:clamp(48px,6vw,84px) calc(clamp(48px,6vw,84px) + var(--schuin))}
.page-hero h1{max-width:24ch}

/* Kerncijfers */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stat{
  background:rgba(255,255,255,.06);border:1px solid var(--line-donker);
  border-radius:var(--radius);padding:20px 22px;
  transition:transform .25s var(--soepel),background-color .25s;
}
.stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)}
.stat b{display:block;font-family:var(--font-hero);font-weight:600;font-size:1.75rem;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{display:block;margin-top:8px;font-size:.84rem;color:var(--on-dark-muted);line-height:1.4}

/* ---------- Kaarten ---------- */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.cards.drie{grid-template-columns:repeat(auto-fit,minmax(318px,1fr))}
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;display:grid;gap:13px;align-content:start;min-width:0;
  transition:transform .25s var(--soepel),box-shadow .25s,border-color .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(10,31,44,.45);border-color:var(--line-sterk)}
.card h3{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card h3 .arrow{color:var(--orange);font-weight:400;transition:transform .25s var(--soepel)}
.card:hover h3 .arrow{transform:translate(3px,-3px)}
.card p{color:var(--muted);font-size:.97rem}
.card ul{margin:0;padding-left:18px;color:var(--muted);font-size:.94rem;display:grid;gap:5px}
.card a.more,.linkcard .more{font-weight:700;text-decoration:none;font-size:.94rem;color:var(--petrol)}
.card a.more:hover{text-decoration:underline}

/* ---------- Case / feiten ---------- */
.case{display:grid;gap:40px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.case .facts{display:grid;gap:0;border-top:1px solid var(--line-donker)}
.case .facts div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line-donker);font-size:.95rem;
}
.case .facts b{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--orange);font-family:var(--font-hero);font-weight:600}
.case p+p{margin-top:14px}

/* ---------- Over ---------- */
.about{display:grid;gap:48px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.portrait{
  border-radius:20px;aspect-ratio:4/5;overflow:hidden;max-width:100%;margin:0;
  background:var(--navy-3);position:relative;
  box-shadow:0 30px 60px -36px rgba(10,31,44,.6);
}
.portrait img{width:100%;height:100%;object-fit:cover}
.badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.badge{
  font-size:.8rem;font-weight:600;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;color:var(--muted);background:var(--bg);
}
.badge.uc{border-color:var(--orange);color:#9A5B00;background:#FFF6EA}
.band.dark .badge{border-color:var(--line-donker);color:var(--on-dark-muted);background:rgba(255,255,255,.05)}

/* ---------- Veelgestelde vragen ---------- */
.faq{max-width:74ch;display:grid;gap:10px}
.faq details{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:0 22px;
  transition:border-color .2s,box-shadow .2s;
}
.faq details[open]{border-color:var(--line-sterk);box-shadow:0 18px 36px -30px rgba(10,31,44,.5)}
.faq summary{cursor:pointer;font-weight:700;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding-bottom:20px;color:var(--muted)}

/* ---------- Contact ---------- */
.contact{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.contact address{font-style:normal;display:grid;gap:7px;color:var(--on-dark-muted)}
.contact address b{color:#fff}

/* ---------- Voettekst ---------- */
.footer{padding-block:34px;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);background:var(--bg)}
.footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- Tijdlijn (cv) ---------- */
.timeline{display:grid;gap:0;max-width:900px}
.job{display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.job:last-child{border-bottom:1px solid var(--line)}
.job .when{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.88rem;padding-top:4px;font-weight:600}
.job h3{font-size:1.05rem}
.job .org{color:var(--petrol);font-weight:600;margin-top:3px}
.job p,.job ul{color:var(--muted);font-size:.95rem;margin-top:9px}
.job ul{padding-left:18px;display:grid;gap:4px}
.job .hl{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:700;color:#9A5B00;background:#FFF6EA;border-radius:999px;padding:5px 12px}
.band.dark .job{border-color:var(--line-donker)}
.band.dark .job .when,.band.dark .job p,.band.dark .job ul{color:var(--on-dark-muted)}

/* ---------- Twee kolommen, sleutel-waarde ---------- */
.two{display:grid;gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kv{display:grid;gap:0;border-top:1px solid var(--line)}
.kv div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.kv span:first-child{color:var(--muted)}
.band.dark .kv,.band.dark .kv div{border-color:var(--line-donker)}
.copy{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.94rem;user-select:all;word-break:break-word}

/* ---------- Formulieren ---------- */
.form{display:grid;gap:16px}
.form label{display:grid;gap:7px;font-size:.88rem;font-weight:700}
.form input,.form textarea{
  font:inherit;font-size:1rem;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--radius-s);background:var(--panel);color:var(--ink);width:100%;min-width:0;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--petrol);background:var(--bg);box-shadow:0 0 0 4px rgba(0,104,153,.14)}
.form textarea{min-height:150px;resize:vertical}
.form label .lbl{display:block}
.form label .optie{font-weight:400;color:var(--muted)}
.note{font-size:.86rem;color:var(--muted)}

/* ===========================================================
   Linkspagina
   =========================================================== */
.linkgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(296px,1fr))}
.linkcard{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:grid;gap:13px;align-content:start;min-width:0;position:relative;
  transition:transform .25s var(--soepel),box-shadow .25s,border-color .25s;
}
.linkcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(10,31,44,.45);border-color:var(--line-sterk)}
.linkcard .top{display:flex;align-items:center;gap:15px;min-width:0}
.linkcard .logo{
  height:60px;min-width:60px;max-width:148px;flex:0 0 auto;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);padding:6px;overflow:hidden;
}
.linkcard .logo img{max-height:46px;max-width:134px;width:auto;height:auto;object-fit:contain}
.linkcard .logo b{display:none;color:var(--petrol);font-weight:800;font-size:.72rem;letter-spacing:.03em;text-align:center;line-height:1.1}
.linkcard .logo.nologo{background:var(--panel-2);min-width:60px;max-width:60px}
.linkcard .logo.nologo b{display:block}
.linkcard .logo.dark{background:var(--navy);border-color:var(--navy-3)}
.linkcard .logo.dark.nologo b{color:#fff}
.linkcard .logo.cover{overflow:visible;background:transparent;border-color:transparent;padding:0}
.linkcard .logo.cover img{max-height:60px;border-radius:3px;box-shadow:0 2px 8px rgba(10,31,44,.3);transition:transform .25s var(--soepel);transform-origin:left center}
.linkcard .logo.cover:hover{z-index:40}
.linkcard .logo.cover:hover img,.linkcard .logo.cover:focus-within img{transform:scale(2)}
.linkcard .logo.cover.nologo{background:var(--panel-2);border-color:var(--line);padding:6px}
.linkcard h3{font-size:1.05rem}
.linkcard .dom{font-size:.8rem;color:var(--muted);word-break:break-word}
.linkcard p{color:var(--muted);font-size:.95rem}
.linkcard .todo{font-size:.9rem;font-weight:700;color:var(--orange)}

/* ===========================================================
   Boekpagina
   =========================================================== */
.bookhero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.status{
  display:inline-flex;gap:10px;align-items:center;margin-top:24px;padding:11px 16px;
  border:1px solid var(--line-donker);border-radius:12px;background:rgba(255,255,255,.06);
  font-size:.95rem;color:var(--on-dark-muted);
}
.status b{color:var(--orange)}
.formats{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-size:.86rem;color:var(--grijs)}
.formats span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:middle}

.stage{perspective:1500px;display:grid;place-items:center;min-height:380px}
.book3d{
  position:relative;width:min(248px,58vw);aspect-ratio:2/3;transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-28deg);animation:drijf 7s ease-in-out infinite;
}
@keyframes drijf{50%{translate:0 -10px}}
.book3d .face{position:absolute;inset:0;border-radius:3px 10px 10px 3px;overflow:hidden}
.book3d .kaft{
  transform:translateZ(18px);box-shadow:0 44px 84px -22px rgba(0,0,0,.75);
  background:linear-gradient(170deg,#14415A 0%,#0A1F2C 58%,#061520 100%);
  border:1px solid rgba(161,189,202,.2);display:flex;flex-direction:column;padding:26px 22px 20px;color:#fff;
}
.book3d .k-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.2em;color:var(--orange);text-transform:uppercase}
.book3d .k-title{font-family:var(--font-hero);font-weight:600;font-size:clamp(1.6rem,6vw,2.1rem);line-height:.98;letter-spacing:-.025em;margin-top:auto}
.book3d .k-title b{display:block;color:var(--orange);font-weight:600}
.book3d .k-sub{font-size:.68rem;line-height:1.35;color:var(--on-dark-muted);margin-top:12px;max-width:22ch}
.book3d .k-author{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-donker)}
.book3d .rug{width:34px;left:0;transform:rotateY(-90deg) translateZ(18px);transform-origin:left;background:linear-gradient(90deg,#06131c,#0d2738);border-radius:3px 0 0 3px}
.book3d .snee{width:34px;right:0;left:auto;transform:rotateY(90deg) translateZ(17px);transform-origin:right center;background:repeating-linear-gradient(90deg,#f3efe6 0 1px,#e2ddd2 1px 2px)}
.book3d .achter{background:#081a25;transform:translateZ(-18px) rotateY(180deg)}
.boekschaduw{position:absolute;bottom:-32px;left:12%;right:12%;height:28px;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(7px)}

.statement{font-family:var(--font-hero);font-weight:500;font-size:clamp(1.55rem,3.6vw,2.5rem);letter-spacing:-.025em;line-height:1.14;max-width:23ch}
.statement .dim{color:var(--muted)}
.perspectief{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));margin-top:40px}
.perspectief article{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  display:grid;gap:11px;align-content:start;
  transition:transform .25s var(--soepel),box-shadow .25s;
}
.perspectief article:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(10,31,44,.45)}
.perspectief .num{font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--petrol)}
.perspectief h3{font-size:1.05rem}
.perspectief p{color:var(--muted);font-size:.95rem}
.perspectief blockquote{margin:6px 0 0;padding-top:13px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);font-style:italic}

.inhoud{margin-top:38px;border-top:1px solid var(--line-donker);padding:0;list-style:none}
.inhoud li{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line-donker);align-items:baseline}
.inhoud b{font-family:var(--font-hero);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.inhoud span{color:var(--on-dark-muted);font-size:.97rem}

.punten{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));margin-top:38px}
.punten div{border-top:2px solid var(--orange);padding-top:16px}
.punten b{display:block;font-size:1.05rem}
.punten span{display:block;margin-top:7px;color:var(--muted);font-size:.95rem}

.auteur{display:grid;gap:48px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center}
.auteur .portret{border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--navy);margin:0;box-shadow:0 30px 60px -36px rgba(10,31,44,.6)}
.auteur .portret img{width:100%;height:100%;object-fit:cover}
.fotoplek{
  border:1.5px dashed var(--line-sterk);border-radius:var(--radius);background:var(--panel-2);
  display:grid;place-items:center;text-align:center;padding:26px;color:var(--muted);font-size:.9rem;min-height:190px;
}
.fotoplek b{display:block;color:var(--petrol);font-size:.95rem;margin-bottom:5px}

/* Inschrijfformulier */
[id]{scroll-margin-top:calc(var(--kop-h) + 22px)}
#inschrijven{scroll-margin-top:calc(var(--kop-h) + 22px)}
.valstrik{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.keuze{border:0;padding:0;margin:0 0 6px}
.keuze legend{font-size:.86rem;font-weight:700;padding:0;margin-bottom:9px}
.aanmeld{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,64px);align-items:start}
.perks{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:20px}
.perks li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:15px;align-items:start}
.perks .ico{width:42px;height:42px;border-radius:12px;background:#E3EEF5;color:var(--petrol);display:grid;place-items:center;font-weight:800}
.perks b{display:block}
.perks span{color:var(--muted);font-size:.95rem}
.panel{
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,4vw,34px);box-shadow:0 34px 66px -46px rgba(10,31,44,.55);min-width:0;
}
.panel h3{font-size:1.18rem}
.field{display:grid;gap:7px;margin-bottom:17px;min-width:0}
.field>label{font-size:.86rem;font-weight:700}
.field .hint{font-weight:400;color:var(--muted)}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.panel input[type=text],.panel input[type=email],.panel input[type=number],.panel textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--panel);
  border:1.5px solid var(--line);border-radius:var(--radius-s);padding:13px 15px;width:100%;max-width:100%;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.panel textarea{min-height:96px;resize:vertical}
.panel input:focus,.panel textarea:focus{outline:none;border-color:var(--petrol);background:var(--bg);box-shadow:0 0 0 4px rgba(0,104,153,.14)}
.panel input:user-invalid,.panel textarea:user-invalid{border-color:#C0392B}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:19px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:.92rem;font-weight:600;background:var(--panel);cursor:pointer;transition:all .2s}
.chip input:checked+span{background:var(--petrol);border-color:var(--petrol);color:#fff;box-shadow:0 10px 22px -14px rgba(0,104,153,.9)}
.chip input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;align-items:start;font-size:.93rem;margin-bottom:16px;cursor:pointer;color:var(--muted)}
.check input{width:24px;height:24px;margin:0;accent-color:var(--petrol)}
.klein{font-size:.85rem;color:var(--muted)}
.fout{color:#C0392B;font-size:.9rem;margin-top:11px}

/* ---------- Responsief ---------- */
@media (max-width:980px){
  .nav{font-size:.9rem}
  .nav a{padding:7px 9px}
}
@media (max-width:860px){
  :root{--schuin:5vw}
  .hero .wrap,.bookhero .wrap,.case,.about,.contact,.two,.auteur,.aanmeld{grid-template-columns:1fr}
  .stage{order:-1;min-height:310px}
  .band{padding-block:clamp(48px,9vw,76px)}
  .job{grid-template-columns:1fr;gap:6px}
  .kv div{grid-template-columns:1fr;gap:2px}
  .inhoud li{grid-template-columns:1fr;gap:5px}
}
@media (max-width:560px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr}
  .rij{grid-template-columns:1fr;gap:0}
  .site-header .wrap{min-height:auto}
}

/* ===========================================================
   Kennis: overzicht en artikelen
   =========================================================== */
.artikelen{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.artikel-kaart{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;display:grid;gap:12px;align-content:start;min-width:0;
  transition:transform .25s var(--soepel),box-shadow .25s,border-color .25s;
}
.artikel-kaart:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(10,31,44,.45);border-color:var(--line-sterk)}
.artikel-kaart .cat{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol)}
.artikel-kaart h3{font-size:1.12rem;line-height:1.25}
.artikel-kaart h3 a{color:inherit;text-decoration:none}
.artikel-kaart h3 a:hover{color:var(--petrol)}
.artikel-kaart p{color:var(--muted);font-size:.95rem}
.artikel-kaart .meta{font-size:.82rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}
.artikel-kaart .meta span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:middle}

.binnenkort{display:grid;gap:0;border-top:1px solid var(--line);margin-top:8px}
.binnenkort li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;list-style:none;font-size:.97rem}
.binnenkort b{font-weight:600}
.binnenkort span{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* Artikelpagina */
.artikel{max-width:72ch;margin:0 auto}
.artikel .lead-antwoord{
  font-size:1.14rem;line-height:1.6;color:var(--ink);font-weight:500;
  border-left:3px solid var(--orange);padding:4px 0 4px 20px;margin-bottom:34px;
}
.artikel h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:44px;margin-bottom:14px}
.artikel h3{font-size:1.08rem;margin-top:28px;margin-bottom:8px}
.artikel p{color:var(--muted);margin-bottom:16px}
.artikel p strong{color:var(--ink)}
.artikel ul,.artikel ol{color:var(--muted);margin:0 0 18px;padding-left:22px;display:grid;gap:7px}
.artikel table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.94rem}
.artikel th,.artikel td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.artikel th{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);font-weight:700;border-bottom:1.5px solid var(--line-sterk)}
.artikel td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.artikel .kader{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:26px 0;
}
.artikel .kader b{display:block;margin-bottom:7px}
.artikel .kader p{margin-bottom:0;font-size:.96rem}
.artikel-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--on-dark-muted);margin-top:20px}
.artikel-meta span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:middle}
.verder{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
@media (max-width:560px){
  .artikel table{font-size:.88rem}
  .artikel td:first-child{white-space:normal}
}

/* ===========================================================
   LinkedIn: wekelijkse post
   =========================================================== */
.li-post{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;max-width:76ch;
}
.li-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.li-merk{
  width:40px;height:40px;flex:0 0 40px;border-radius:9px;background:#0A66C2;color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.95rem;letter-spacing:-.02em;
}
.li-wie b{display:block;font-size:.98rem}
.li-wie span{font-size:.82rem;color:var(--muted)}
.li-beeld{margin:0 0 22px;max-width:520px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.li-beeld img{display:block;width:100%;height:auto}
.li-oud .li-beeld{margin:14px 0 4px;max-width:420px}
.li-tekst{white-space:pre-line;color:var(--ink);font-size:1.02rem;line-height:1.65}
.li-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.li-tags span{font-size:.8rem;font-weight:600;color:var(--petrol);background:var(--panel-2);border-radius:999px;padding:6px 12px}
.li-reacties{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.li-reacties > b{display:block;font-size:.88rem;margin-bottom:12px}
.li-embed{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.li-embed iframe{display:block;width:100%;height:560px;border:0}
.li-val{margin-top:10px;color:var(--muted);font-size:.85rem}
.li-voet{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.li-leeg{color:var(--muted);font-size:.97rem}
@media (max-width:560px){.li-post{padding:24px 20px}.li-embed iframe{height:620px}}

/* Archief van oudere posts */
.li-archief{max-width:76ch;margin-top:26px;display:grid;gap:12px}
.li-archief > b{font-size:.88rem;display:block;margin-bottom:2px}
.li-oud{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:0 20px;transition:border-color .2s}
.li-oud[open]{border-color:var(--line-sterk)}
.li-oud summary{
  cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:14px;align-items:baseline;padding:16px 0;
}
.li-oud summary::-webkit-details-marker{display:none}
.li-oud summary b{font-weight:700;font-size:.98rem}
.li-oud summary .dt{font-size:.8rem;color:var(--muted);white-space:nowrap}
.li-oud summary::after{content:"+";color:var(--orange);font-size:1.3rem;line-height:1;grid-column:3}
.li-oud[open] summary::after{content:"\2013"}
.li-tekst{font-size:.97rem;padding-bottom:6px}
.li-oud .li-tags{margin-top:14px}
.li-oud .li-voet{margin-bottom:18px}
@media (max-width:560px){.li-oud summary{grid-template-columns:minmax(0,1fr) auto;gap:6px}.li-oud summary .dt{grid-column:1}}

/* Twee ingeklapte groepen met oudere posts */
.li-groep{
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  padding:0 20px;transition:border-color .2s,box-shadow .2s;
}
.li-groep[open]{border-color:var(--line-sterk);box-shadow:0 18px 40px -34px rgba(10,31,44,.5)}
.li-groep > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  padding:18px 0;font-weight:700;font-size:1rem;
}
.li-groep > summary::-webkit-details-marker{display:none}
.li-groep > summary .aantal{
  font-size:.78rem;font-weight:700;color:var(--petrol);background:var(--panel-2);
  border-radius:999px;padding:4px 10px;
}
.li-groep > summary::after{content:"+";margin-left:auto;color:var(--orange);font-size:1.4rem;line-height:1}
.li-groep[open] > summary::after{content:"\2013"}
.li-groep .li-lijst{display:grid;gap:10px;padding:2px 0 20px}
.li-groep .li-oud{background:var(--panel)}