/* CHUNCK.audio - opmaak van alle pagina's. */

@font-face{
  font-family:"Comfortaa";
  src:url("fonts/Comfortaa-var.woff2") format("woff2-variations");
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("fonts/DMSans-var.woff2") format("woff2-variations");
  font-weight:100 1000;font-style:normal;font-display:swap;
}
:root{
  --bg:#141b28;
  --bg-deep:#0d121c;
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.78);
  --accent:#edf000;
  --pill:#000000;
  --line:rgba(255,255,255,.14);
  --display:"Comfortaa","Trebuchet MS",sans-serif;
  --body:"DM Sans",Helvetica,Arial,sans-serif;
  --shell:1080px;
  --gutter:24px;
  --head:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:300 19px/1.8 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:3px;margin:0;text-wrap:balance}
/* Eén h1 op de pagina (de intro). De secties zijn h2, de diensten h3.
   De maten blijven gelijk aan hoe het er stond. */
h1,h2{font-size:34px;line-height:1.5;padding-bottom:10px}
h3{font-size:29px;line-height:1.5;padding-bottom:10px}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(44px,5.5vw,76px)}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#000;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;height:var(--head);z-index:60;
  display:flex;align-items:center;
  transition:background-color .3s ease,backdrop-filter .3s ease;
}
/* Boven de hero heeft de balk geen achtergrond, en daar staat het menu in
   wit op een lichte, drukke animatie. Een korte verloopstrook geeft de
   letters houvast zonder dat je een balk ziet. Zodra de balk zelf een
   achtergrond krijgt is de strook overbodig. */
.site-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(10,14,22,.6), rgba(10,14,22,.28) 55%, transparent);
  transition:opacity .3s ease;
}
.site-head.is-stuck::before{opacity:0}
.site-head .shell{position:relative}
/* Doorschijnende balk: de pagina schuift er zichtbaar onderdoor, vervaagd.
   Wil je hem doorzichtiger, verlaag dan het laatste getal in rgba();
   wil je meer waas, verhoog dan de blur. */
.site-head.is-stuck{
  background:rgba(13,18,28,.42);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Kan de browser niet vervagen, dan maken we de balk dekkender,
   anders wordt het menu onleesbaar over de pagina heen. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head.is-stuck{background:rgba(13,18,28,.94)}
}
.site-head .shell{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:block;width:150px;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.site-head.is-stuck .brand{opacity:1;transform:none;pointer-events:auto}
.brand img{width:100%}
.nav{display:flex;gap:28px;align-items:center}
.nav a{
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2px;
  color:var(--ink);text-decoration:none;position:relative;padding:6px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);
  transition:right .25s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.burger{display:none;background:none;border:0;color:var(--ink);padding:10px;cursor:pointer}
.burger svg{display:block}

/* Taalkeuze: geen los merkteken, het verschil in helderheid zegt het al.
   De taal die je leest staat vol, de andere staat weg. Zweef je erover,
   dan komt hij op en zie je wat je klik oplevert. Grijs maken werkt niet:
   de Nederlandse vlag wordt dan drie grijze balken. */
.head-right{display:flex;align-items:center;gap:26px}
.talen{display:flex;align-items:center;gap:10px}
.taal{
  display:block;line-height:0;
  opacity:.3;transition:opacity .25s ease;
}
.taal:hover{opacity:.75}
.taal.is-actief{opacity:1}
.taal svg{display:block;width:22px;height:15px}

@media (max-width:860px){
  .brand{opacity:1;transform:none;pointer-events:auto;width:120px}
  .burger{display:block}
  .head-right{gap:14px}
  .nav{
    position:fixed;inset:var(--head) 0 auto 0;flex-direction:column;gap:0;
    background:rgba(13,18,28,.82);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
            backdrop-filter:blur(18px) saturate(150%);
    border-top:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav.is-open{max-height:70vh}
  .nav a{width:100%;text-align:center;padding:16px 24px;border-bottom:1px solid var(--line);font-size:16px}
  .nav a::after{display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;height:min(720px,100svh);min-height:460px;
  display:grid;place-items:center;overflow:hidden;background:#000;
}
.hero video,.hero .hero-still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Een zachte waas onder het logo. De animatie is druk en licht van kleur,
   dus zonder dit valt het witte logo er plaatselijk in weg. Naar de randen
   toe lost de waas op, zodat de animatie zelf zichtbaar blijft. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 72% 58% at 50% 46%,
    rgba(10,14,22,.62) 0%,
    rgba(10,14,22,.42) 45%,
    rgba(10,14,22,.12) 72%,
    transparent 88%);
}
.hero-logo{
  position:relative;z-index:1;
  width:min(780px,84vw);padding-inline:var(--gutter);
}
.hero-down{
  position:absolute;z-index:1;bottom:26px;left:50%;translate:-50% 0;
  width:44px;height:44px;display:grid;place-items:center;color:var(--ink);
  animation:bob 2.4s ease-in-out infinite;
}
.hero-down:hover{color:var(--accent)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- parallaxstroken ----------
   De foto is hoger dan de strook zelf. Bij het scrollen schuift hij binnen
   die strook de andere kant op, waardoor hij langzamer meebeweegt dan de
   pagina. De speling zit in de extra hoogte van .rule-bg. */
.rule{
  position:relative;height:200px;overflow:hidden;
  /* Hoeveel de foto in totaal achterblijft op de pagina. Groter is sterker.
     De speling in .rule-bg moet wel ruimer zijn dan deze waarde. */
  --speling:220px;
  /* Hoe hoog de geknikte rand boven- en onderaan is. */
  --rand:76px;
  /* Standaard geen spiegeling; per strook hieronder anders gezet. */
  --spiegel-boven:scale(-1,1);
  --spiegel-onder:scale(1,1);
}
.rule-bg{
  position:absolute;left:0;right:0;top:-75%;height:250%;
  background-size:cover;background-position:center;
  will-change:transform;
}
/* De geknikte randen. Dit zijn twee vlakken in de achtergrondkleur die over
   de foto heen liggen: een doorzichtige laag en daaroverheen een dekkende,
   waardoor de knik een dubbele rand krijgt. Dezelfde vorm als op de oude
   site. Door ze per strook wel of niet te spiegelen verschilt elke strook. */
.rule::before,.rule::after,.kop::after{
  content:"";position:absolute;left:0;right:0;height:var(--rand);
  z-index:2;pointer-events:none;
  background-repeat:no-repeat;background-size:100% 100%;
}
.rule::before{
  top:0;transform:var(--spiegel-boven);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cg fill='%23141b28'%3E%3Cpath d='M0 90.72l140-28.28 315.52 24.14L796.48 65.8 1140 104.89l140-14.17V0H0v90.72z' fill-opacity='.5'/%3E%3Cpath d='M0 0v47.44L170 0l626.48 94.89L1110 87.11l170-39.67V0H0z'/%3E%3C/g%3E%3C/svg%3E");
}
.rule::after,.kop::after{
  bottom:0;transform:var(--spiegel-onder);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cg fill='%23141b28'%3E%3Cpath d='M0 47.44L170 0l626.48 94.89L1110 87.11l170-39.67V140H0V47.44z' fill-opacity='.5'/%3E%3Cpath d='M0 90.72l140-28.28 315.52 24.14L796.48 65.8 1140 104.89l140-14.17V140H0V90.72z'/%3E%3C/g%3E%3C/svg%3E");
}
.vorm-1{--spiegel-boven:scale(-1,1);--spiegel-onder:scale(1,1)}
.vorm-2{--spiegel-boven:scale(1,1); --spiegel-onder:scale(-1,1)}
.vorm-3{--spiegel-boven:scale(-1,1);--spiegel-onder:scale(-1,1)}
.vorm-4{--spiegel-boven:scale(1,1); --spiegel-onder:scale(1,1)}
@media (max-width:860px){
  .rule{height:140px;--rand:54px}
}
@media (prefers-reduced-motion:reduce){
  .rule-bg{top:0;height:100%;transform:none!important}
}
}

/* ---------- intro ---------- */
.intro p{font-size:19px;color:var(--ink)}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 40px}
/* Een vlak dat van boven oplicht en naar alle randen oplost. Het houdt
   icoon, kop en tekst bij elkaar zonder dat er een kader omheen staat, en
   het geeft de donkere 3D-iconen een iets lichtere ondergrond. */
.service{
  text-align:center;
  padding:36px 32px 38px;
  background:radial-gradient(125% 105% at 50% 0%,
    rgba(255,255,255,.075) 0%,
    rgba(255,255,255,.028) 42%,
    rgba(255,255,255,0) 76%);
}
.service img{margin:0 auto 10px;width:auto;height:66px}
.service p{text-align:left;font-weight:400}

/* ---------- work ---------- */
/* De filters vormen samen één blok in plaats van losse knopjes:
   een omlijst paneel waarin de gekozen categorie geel oplicht. */
.filter-wrap{display:flex;justify-content:center;align-items:stretch;gap:6px;margin:4px 0 34px}
/* Dezelfde pijltjes als bij de paginanummers. Ze verschijnen alleen als de
   rij breder is dan het scherm, en doven als je aan het eind bent. */
.filter-pijl{
  flex:0 0 auto;
  font-family:var(--display);font-size:13px;line-height:1;font-weight:600;
  min-width:38px;padding:0 10px;
  border:1px solid var(--line);background:var(--bg-deep);
  color:rgba(255,255,255,.6);cursor:pointer;
  transition:color .18s ease,background-color .18s ease,opacity .18s ease;
}
.filter-pijl:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.filter-pijl[disabled]{opacity:.26;cursor:default;color:rgba(255,255,255,.6);background:var(--bg-deep)}
.filter-pijl[hidden]{display:none}
.filters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px;
  list-style:none;margin:0;padding:6px;
  background:var(--bg-deep);border:1px solid var(--line);
}
.filters button{
  font-family:var(--display);font-size:11px;line-height:1;font-weight:600;
  letter-spacing:0;white-space:nowrap;
  padding:12px 10px;border:0;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.6);
  transition:color .18s ease,background-color .18s ease;
}
.filters button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.filters button[aria-pressed="true"]{background:var(--accent);color:#11161f}
.filters button[aria-pressed="true"]:hover{background:var(--accent);color:#11161f}

/* Op smalle schermen waaieren twaalf filters uit over een handvol regels.
   Daar wordt het één rij die je opzij veegt, met een vervaging aan de
   randen als hint dat er meer staat. */
@media (max-width:760px){
  .filter-wrap{margin-bottom:26px}
  .filters{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    max-width:100%;
  }
  .filters::-webkit-scrollbar{display:none}
  .filters.kan-links{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);
            mask-image:linear-gradient(90deg,transparent,#000 28px);
  }
  .filters.kan-rechts{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .filters.kan-links.kan-rechts{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  }
  .filters li{scroll-snap-align:center}
  .filters button{
    font-size:12px;padding:13px 14px;min-height:42px;
  }
}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:480px){.grid{grid-template-columns:1fr}}

.tile{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a0d14;
  color:var(--ink);text-decoration:none;
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .4s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06);filter:brightness(.35)}
.tile-cap{
  position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  gap:4px;padding:10px;text-align:center;opacity:0;transition:opacity .3s ease;
}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{opacity:1}
.tile-cap b{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.4vw,20px);line-height:1.25}
.tile-cap span{font-family:var(--display);font-size:10px;line-height:1.5;color:var(--accent)}

.pager{display:flex;justify-content:center;margin-top:36px}
.pager:empty{display:none}
.pager-inner{display:flex;gap:2px;padding:6px;background:var(--bg-deep);border:1px solid var(--line)}
.pager button{
  font-family:var(--display);font-size:11px;line-height:1;font-weight:600;
  min-width:36px;padding:12px 10px;
  border:0;cursor:pointer;background:transparent;color:rgba(255,255,255,.6);
  transition:color .18s ease,background-color .18s ease;
}
.pager button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.pager button[aria-current="true"]{background:var(--accent);color:#11161f}
.pager button[aria-current="true"]:hover{background:var(--accent);color:#11161f}
.pager button[disabled]{opacity:.28;cursor:default;background:transparent;color:rgba(255,255,255,.6)}
.pager .stap{letter-spacing:0}
.empty{text-align:center;color:var(--ink-soft);padding:40px 0}
/* Bij het wisselen van pagina of categorie vervaagt het raster even weg.
   Zonder dit klappen twaalf tegels in één beeldje om en dat oogt schokkerig.
   De hoogte loopt apart mee, zodat alles eronder rustig meeschuift in plaats
   van in één sprong korter of langer te worden. */
.grid{transition:opacity .2s ease, height .34s cubic-bezier(.4,0,.2,1)}
.grid.wisselt{opacity:0}
.grid.meet{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .grid{transition:none}
  .grid.wisselt{opacity:1}
}

/* ---------- merkenbalk ---------- */
.merken{padding-block:clamp(28px,3.5vw,44px)}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:clamp(40px,5vw,76px);
  width:max-content;animation:schuif var(--duur,44s) linear infinite;
}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* De balk is puur om naar te kijken: niets is klikbaar en niets reageert
   op de muis, dus vangt hij ook geen aanwijzer op. */
.marquee{pointer-events:none}
.merk{display:grid;place-items:center;flex:0 0 auto;opacity:.82}
.merk img{
  /* --schaal corrigeert per logo. Een bestand met veel lucht eromheen,
     zoals sterretjes boven een woordmerk, oogt anders te klein. */
  height:calc(clamp(26px,3.2vw,40px) * var(--schaal,1));
  width:auto;max-width:none;
  /* Elk logo wordt wit, ongeacht de kleur van het bronbestand. */
  filter:brightness(0) invert(1);
}
/* Bestanden die al wit zijn met een doorzichtige achtergrond moeten juist
   niet door dat filter: dat zou ze zwart maken. Zet -wit in de bestandsnaam. */
.merk img.al-wit{filter:none}
.merk span{
  font-family:var(--display);font-weight:600;font-size:clamp(15px,1.8vw,21px);
  letter-spacing:1px;color:var(--ink);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
}

/* ---------- lightbox ---------- */
.lb{border:0;padding:0;background:transparent;max-width:min(1100px,92vw);width:100%}
.lb::backdrop{
  background:rgba(5,8,13,.72);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
}
.lb-frame{position:relative;aspect-ratio:16/9;background:#000}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-close{
  position:absolute;top:-44px;right:0;background:none;border:0;color:var(--ink);
  font:400 14px/1 var(--display);cursor:pointer;padding:10px;
}
.lb-close:hover{color:var(--accent)}

/* ---------- who ---------- */
/* De foto neemt de hoogte van de tekstkolom over en vult die helemaal.
   Wordt het venster smaller, dan wordt de kolom smaller en snijdt de foto
   zichzelf bij; de hoogte blijft gelijk aan die van de tekst ernaast. */
.who{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.who p{font-size:19px}
.who .lead{font-weight:700;font-family:var(--body)}
.who figure{margin:0;height:100%;overflow:hidden}
.who figure img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}


/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:2fr 3fr;gap:40px;align-items:stretch}
.contact p{font-size:19px}
.contact a{color:var(--accent)}
.map{position:relative;min-height:340px;background:var(--bg-deep);border:1px solid var(--line);overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transition:opacity .4s ease}
.map-facade{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  padding:24px;text-align:center;cursor:pointer;background:none;border:0;
  color:var(--ink);text-decoration:none;
  font-family:var(--body);font-size:16px;
  background-image:linear-gradient(rgba(20,27,40,.65),rgba(20,27,40,.65)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 42px);
}
.map-facade:hover{color:var(--accent)}

@media (max-width:860px){
  .services,.who,.contact{grid-template-columns:1fr;gap:20px}
  .service{padding:30px 22px 32px}
  h1,h2{font-size:28px}
  h3{font-size:24px}
  body{font-size:17px}
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line);padding-block:44px 26px;
  font-size:14px;color:var(--ink-soft);background:var(--bg-deep);
}
/* De sitemap: drie kolommen, op een telefoon onder elkaar. */
.sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px;margin-bottom:34px}
.sitemap h2{
  font-size:15px;letter-spacing:1.5px;line-height:1.4;padding-bottom:12px;color:var(--ink);
}
.sitemap ul{list-style:none;margin:0;padding:0}
.sitemap li{margin:0 0 7px;line-height:1.5}
.sitemap a{color:var(--ink-soft)}
.sitemap a:hover,.sitemap a[aria-current="page"]{color:var(--accent)}
.colofon{margin:0;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:13px}
@media (max-width:640px){
  .sitemap{grid-template-columns:1fr 1fr}
  .sitemap > div:last-child{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rule{background-attachment:scroll}
}

/* ---------- landingspagina's ----------
   Een landingspagina heeft geen grote film bovenaan, maar een kop met een
   foto, dezelfde geknikte onderrand als de stroken, en daaronder leestekst. */
.subpagina .brand{opacity:1;transform:none;pointer-events:auto}

.kop{
  position:relative;overflow:hidden;background:#000;
  display:grid;place-items:center;text-align:center;
  min-height:clamp(320px,36vw,460px);
  padding:calc(var(--head) + 24px) var(--gutter) 96px;
  --rand:76px;--speling:180px;--spiegel-onder:scale(-1,1);
}
/* donkere waas over de foto, zodat de titel leesbaar blijft */
.kop::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,
    rgba(10,14,22,.72) 0%, rgba(10,14,22,.5) 55%, rgba(10,14,22,.3) 100%);
}
.kop-tekst{position:relative;z-index:3;max-width:860px}
.kop h1{font-size:clamp(30px,4.2vw,48px);padding-bottom:0}
.kruimel{margin:0 0 14px;font-size:14px;letter-spacing:.5px;color:var(--ink-soft)}
.kruimel a{color:var(--ink-soft)}
.kruimel a:hover{color:var(--ink)}

.leestekst{max-width:760px;margin-inline:auto}
.leestekst p{font-size:19px}
.leestekst .lead{font-size:21px;color:var(--ink)}
.leestekst h2{font-size:28px;margin-top:1.3em}


.cta{max-width:720px;margin-inline:auto;text-align:center}
.cta p{font-size:19px}
.knop{
  display:inline-block;margin-top:6px;padding:14px 30px;
  background:var(--accent);color:#000;font-weight:700;letter-spacing:.5px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.knop:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 22px rgba(237,240,0,.18)}

@media (max-width:860px){
  .kop{--rand:54px;padding-bottom:70px}
  .leestekst h2{font-size:24px}
  .leestekst p,.cta p{font-size:17px}
  .leestekst .lead{font-size:19px}
}

/* ---------- geluidsfragmenten (SoundCloud) ----------
   Net als de video's: de speler van SoundCloud laadt pas na een klik. */
.fragmenten{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px 40px;
}
.fragment{text-align:center}
.fragment h3{font-size:19px;letter-spacing:2px;padding:14px 0 4px}
.fragment p{margin:0;font-size:14px;color:var(--ink-soft)}
/* 166 pixels is de vaste hoogte van de SoundCloud-speler. Het vak is voor
   en na de klik even hoog, zodat er niets verspringt of over de tekst valt. */
.speler{
  position:relative;height:166px;overflow:hidden;
  background:var(--bg-deep);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.speler iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.luister{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:12px 22px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font:600 15px/1 var(--body);letter-spacing:.5px;transition:background-color .2s ease,color .2s ease;
}
.luister:hover,.luister:focus-visible{background:var(--accent);color:#000;border-color:var(--accent)}

.fragmenten-na-raster{margin-top:clamp(48px,6vw,80px)}