/* ============================================================
   SKIN: HOME — "HET MANIFEST"
   Sfeer: diep donker, brutaal groot, hoog contrast.
   Display-font: Anton (condensed, poster-achtig).
   ============================================================ */

body[data-skin="manifest"] {
  --pg-bg:   #0d0d10;
  --pg-fg:   #ffffff;
  --pg-mut:  #8f8f9c;
  --pg-lijn: #26262d;
  --display: "Anton", "Arial Narrow", sans-serif;
  background: var(--pg-bg);
  color: var(--pg-fg);
}

/* koppen die door de hele pagina terugkomen */
.kop-groot {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 20px 0 0;
}

.lead {
  font-size: var(--t-lead);
  color: var(--pg-mut);
  line-height: 1.8;
  max-width: 58ch;
  margin-top: 22px;
}

/* ---------- 1. DE OPENING ----------

   Bauhaus, maar zonder de vormpjes die je overal ziet. Er is geen
   cirkel en geen driehoek: links de tekst met een gele staander
   ernaast, rechts je logo als stapel blokken. Zeven kolommen tegen
   vijf, dus niets staat in het midden.

   De hele kop hangt aan één gedachte: alles is uitgemeten. Links
   staan de hulplijnen van de letter met de gemeten kaphoogte en
   x-hoogte erbij, rechts de maten van het pixelraster. Daar zit het
   verband tussen de twee helften.

   Geen scrollverhaal meer: de kop is één scherm hoog en meteen af.
   Wat beweegt zijn de blokken die er bij het laden op vallen. */
.intro {
  position: relative;
  background: var(--pg-bg);
}

.intro-plak {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--nav-h);
}

/* het raster, zichtbaar gelaten: bauhaus verstopt zijn constructie niet */
.bh-raster { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bh-raster i { position: absolute; background: rgba(242, 240, 234, .075); }
.bh-raster i.v { top: 0; bottom: 0; width: 1px; }
.bh-raster i.h { left: 0; right: 0; height: 1px; }
.bh-raster i.v:nth-of-type(1) { left: 25%; }
.bh-raster i.v:nth-of-type(2) { left: 50%; }
.bh-raster i.v:nth-of-type(3) { left: 75%; }

/* het staande opschrift langs de linkerrand, zoals op een affiche */
.bh-zij {
  position: absolute; z-index: 6;
  left: 0; bottom: clamp(16px, 4vh, 46px);
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding-left: 10px;
  font-family: var(--mono);
  font-size: .6rem; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(242, 240, 234, .45);
}

/* ---------- DE TWEE HELFTEN ---------- */
.bh-in {
  position: relative; z-index: 5; flex: 1;
  display: grid; grid-template-columns: 7fr 5fr;
  align-items: center; gap: clamp(20px, 4vw, 60px);
  padding: clamp(24px, 4vh, 60px) var(--pad-x);
}

.bh-tekst { position: relative; padding-left: clamp(16px, 2.4vw, 34px); }
/* de gele staander: de vierde grondvorm, de rechte lijn */
.bh-tekst::before {
  content: "";
  position: absolute; left: 0; top: .1em; bottom: 26%;
  width: 6px; background: var(--geel);
}

/* ---------- DE KOP ----------
   Geist, het lettertype van Vercel: strak en geometrisch, precies
   wat bauhaus van een letter vraagt. */
.manifest {
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: min(3.9vw, 7.4vh);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  position: relative;
  margin: 0;
}
.manifest > .rg { display: block; }
.manifest > .rg:nth-child(2) { padding-left: .42em; }
.manifest em { font-style: normal; color: inherit; }

/* ---------- DE KOP ALS ONTWERP IN WORDING ----------

   Het idee: het lijkt alsof de kop nog op de tekentafel ligt. Daar
   hoort bij dat je de hulplijnen ziet, dat er een selectiekader
   omheen staat met greepjes op de hoeken, en dat de maten ergens
   netjes op een rij staan.

   De opschriften stonden eerst bij elke lijn. Dat ging mis zodra twee
   lijnen dicht bij elkaar kwamen: dan vielen ze over elkaar of over de
   woorden heen. Nu staan alle maten op één regel onder de kop, en zijn
   de lijnen zelf kaal. Ze kunnen dus niet meer botsen. */
.bh-spec { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* het selectiekader om de hele kop */
.bh-spec::before {
  content: ""; position: absolute; inset: -10px -12px;
  border: 1px dashed rgba(242, 240, 234, .22);
}

/* de hulplijnen, kaal */
.bh-spec .lijn {
  position: absolute; left: -12px; right: -12px; height: 1px;
  background: rgba(242, 240, 234, .2);
}
.bh-spec .lijn.basis { background: rgba(255, 79, 139, .6); }

/* de greepjes op de hoeken, zoals in een ontwerpprogramma */
.bh-spec .greep {
  position: absolute; width: 7px; height: 7px;
  background: var(--pg-bg); border: 2px solid var(--roze);
}
.bh-spec .greep.g1 { top: -13px; left: -15px; }
.bh-spec .greep.g2 { top: -13px; right: -15px; }
.bh-spec .greep.g3 { bottom: -13px; right: -15px; }
.bh-spec .greep.g4 { bottom: -13px; left: -15px; }

/* de maten, op één regel onder de kop */
.bh-maat {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 20px;
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 240, 234, .4);
}
.bh-maat span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bh-maat span::before {
  content: ""; width: 8px; height: 1px; background: rgba(242, 240, 234, .35);
}
.bh-maat span.roze { color: rgba(255, 79, 139, .85); }
.bh-maat span.roze::before { background: rgba(255, 79, 139, .7); }

/* ---------- DE MS-DOS CURSOR ---------- */
.dos-blok {
  display: inline-block;
  width: .52em; height: .78em;
  margin-left: .08em;
  background: var(--geel);
  vertical-align: baseline;
  animation: knipper 1s steps(1) infinite;
}
@keyframes knipper { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dos-blok { animation: none; } }

/* ---------- DE KNOP ----------
   Plat, met diepte door een tweede plat vlak eronder. Geen verloop,
   geen glans, geen wazige schaduw. Druk je hem in, dan valt hij op
   dat tweede vlak en is de diepte weg. */
.bh-knoppen { display: flex; gap: 16px; flex-wrap: wrap; margin-top: clamp(22px, 3.2vh, 38px); }
.knop {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  background: var(--roze); color: var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border: 0; cursor: pointer;
  box-shadow: 7px 7px 0 #f2f0ea;
  transition: transform var(--snel), box-shadow var(--snel);
}
.knop:hover  { transform: translate(4px, 4px); box-shadow: 3px 3px 0 #f2f0ea; }
.knop:active { transform: translate(7px, 7px); box-shadow: 0 0 0 #f2f0ea; }
.knop.geel   { background: var(--geel); }
.knop svg    { width: 17px; height: 17px; flex: none; }

/* ---------- HET RIJTJE DIENSTEN ---------- */
.dienstenrij {
  display: flex; flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: clamp(20px, 2.6vh, 30px);
  list-style: none;
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.dienstenrij a {
  color: #b9b9c4; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--snel), border-color var(--snel);
}
.dienstenrij a:hover { color: var(--roze); border-bottom-color: var(--roze); }
.hero-accent { margin-top: clamp(16px, 2.2vh, 24px); }

/* ---------- DE RECHTERHELFT: HET LOGO ALS STAPEL ---------- */
.bh-vorm { position: relative; height: 100%; min-height: 34vh; }
.bh-vorm canvas { display: block; width: 100%; height: 100%; }

/* de maten van het raster, langs de rand */
.bh-maten {
  position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 13% 0;
  font-family: var(--mono); font-size: .5rem; font-weight: 700;
  letter-spacing: .14em; color: rgba(242, 240, 234, .38); text-align: right;
}
.bh-breedte {
  position: absolute; z-index: 3;
  left: 34px; right: 0; bottom: 7%;
  height: 1px; background: rgba(242, 240, 234, .28);
}
.bh-breedte::before, .bh-breedte::after {
  content: ""; position: absolute; top: -4px;
  width: 1px; height: 9px; background: rgba(242, 240, 234, .38);
}
.bh-breedte::before { left: 0; }
.bh-breedte::after  { right: 0; }
.bh-breedte i {
  position: absolute; left: 50%; transform: translateX(-50%); top: -17px;
  font-family: var(--mono); font-style: normal;
  font-size: .5rem; font-weight: 700; letter-spacing: .18em;
  color: rgba(242, 240, 234, .42);
  background: var(--pg-bg); padding: 0 6px;
}

/* ---------- SMALLE SCHERMEN ----------
   De stapel gaat naar boven en wordt kleiner, de tekst eronder. Het
   raster en de staander blijven, want daar hangt het aan. */
@media (max-width: 860px) {
  .bh-in { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 26px); }
  .bh-vorm { order: -1; min-height: 28vh; height: 28vh; }
  .manifest { font-size: min(7.1vw, 6.4vh); }
  .manifest > .rg:nth-child(2) { padding-left: .2em; }
  /* de opschriften bij de hulplijnen vallen op deze breedte over de
     woorden heen; de lijnen zelf blijven wel staan */
  .bh-spec .lijn i { display: none; }
  .bh-zij { display: none; }
  .bh-maten { display: none; }
  .bh-breedte { left: 0; }
}
@media (max-width: 520px) {
  .bh-knoppen .knop { width: 100%; justify-content: center; }
  .dienstenrij { font-size: .62rem; gap: 6px 16px; }
}
@media (max-height: 700px) and (min-width: 861px) {
  .manifest { font-size: min(4.5vw, 9.6vh); }
}

/* ---------- DE FOTOBAND ----------
   Niet meer van rand tot rand: de foto staat als los blok rechts in
   het raster, en vervaagt aan alle vier de randen in de achtergrond.
   De tekst valt over de linkerhelft heen, precies in die vervaging.
   Zo blijft de hele zittende houding zichtbaar. */
.band {
  padding: clamp(56px, 9vw, 120px) var(--pad-x);
}

.band-in {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

/* het beeld: rechts, niet over de volle breedte */
.band-beeld {
  grid-column: 5 / 13;
  grid-row: 1;
  position: relative;
}

/* de pixels uit de opening lopen hier over de foto door */
.band-doek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.band-beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.7;
  object-fit: cover;
  /* aangesneden op haar gezicht in de deuropening */
  object-position: 46% 30%;
  display: block;
  filter: grayscale(1) contrast(1.06);

  /* vervaging aan álle vier de randen: twee verlopen die elkaar
     doorsnijden, zodat het beeld in de achtergrond oplost */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 20%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 20%, #000 86%, transparent 100%);
          mask-composite: intersect;
}

/* de tekst ligt over de linkerkant van het beeld heen */
.band-txt {
  grid-column: 1 / 7;
  grid-row: 1;
  position: relative;
  z-index: 2;
}
.band-naam {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--t-xl);
  line-height: .9;
  letter-spacing: -.012em;
  margin-bottom: 18px;
}
.band-sub {
  font-size: var(--t-lead);
  line-height: 1.8;
  color: #c6c6d0;
  max-width: 40ch;
  text-shadow: 0 2px 14px rgba(11,11,14,.9);
}
.band-link {
  display: inline-block;
  margin-top: 22px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 2px solid var(--roze);
  padding-bottom: 3px;
  transition: color var(--snel), border-color var(--snel);
}
.band-link:hover { color: var(--roze); border-color: var(--geel); }

/* Op tablet en telefoon blijven foto en tekst naast elkaar staan, maar
   dan als twee echte kolommen in plaats van over elkaar heen. De foto
   wordt smal en staand, de tekst krijgt de rest. */
@media (max-width: 900px) {
  .band-in {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(14px, 3vw, 26px);
    align-items: start;
  }
  /* de foto loopt mee met de hoogte van de tekst ernaast, zodat het
     twee even hoge kolommen worden in plaats van een klein plaatje */
  .band-beeld { grid-column: 1; grid-row: 1; align-self: stretch; }
  .band-txt   { grid-column: 2; grid-row: 1; }

  .band-beeld img {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
    object-position: 48% 22%;
    /* smalle foto: minder vervaging opzij, anders blijft er niets over */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image:
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  .band-naam { font-size: clamp(1.5rem, 7vw, 2.4rem); margin-bottom: 12px; }
  .band-sub { max-width: none; font-size: .84rem; line-height: 1.7; }

}
/* ---------- 3. VIER BANEN: EEN ECHTE TAKENLIJST ----------
   Vier regels met een leeg blokje ervoor. Kom je met je scroll bij de
   lijst, dan worden er drie afgevinkt en doorgestreept, één voor één.
   Wat overblijft is jouw eigen vak. Dat is precies de boodschap.
   Ga je er met je muis overheen, dan komt de taak weer terug. */
.banen { padding: clamp(64px, 9vw, 130px) var(--pad-x); }

.baan-lijst {
  margin-top: clamp(36px, 5vw, 58px);
  border-top: var(--lijn-dik) solid var(--pg-fg);
}

.baan {
  --blokje: clamp(26px, 3vw, 38px);
  display: grid;
  grid-template-columns: var(--blokje) minmax(0, 1fr);
  align-items: start;
  gap: 0 clamp(16px, 2.2vw, 28px);
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-bottom: var(--lijn-dik) solid var(--pg-fg);
  transition: background var(--snel), padding-left var(--snel);
}

/* het lege vakje voor de taak */
/* het nummer van de baan, in een blokje ernaast */
.baan-nr {
  flex: none;
  width: var(--blokje); height: var(--blokje);
  margin-top: .18em;
  display: grid; place-items: center;
  border: var(--lijn-dik) solid var(--roze);
  border-radius: var(--ronding);
  font-family: var(--mono); font-weight: 700; font-size: .72rem;
  color: var(--roze);
  transition: background var(--snel), color var(--snel), border-color var(--snel);
}

.baan h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.baan p {
  font-size: var(--t-klein);
  line-height: 1.75;
  color: var(--pg-mut);
  margin-top: 8px;
  max-width: 62ch;
}

/* de baan die van jou blijft, staat in het geel */
.baan.jij .baan-nr { border-color: var(--geel); color: var(--geel); }

/* muis erover: het nummer loopt vol */
.baan:hover { background: #131318; padding-left: 14px; }
.baan.ik:hover .baan-nr { background: var(--roze); color: var(--ink); }
.baan.jij:hover { background: #17160f; }
.baan.jij:hover .baan-nr { background: var(--geel); color: var(--ink); }
/* ---------- 4. DIENSTEN ---------- */
.diensten {
  padding: clamp(64px, 9vw, 130px) var(--pad-x);
}

/* ---------- 5. WERK: DRIE FOTO'S OP TAFEL ----------
   Geen nette rij kaartjes maar drie schermafdrukken die scheef op
   elkaar liggen, met plakband erop. Ga je er met je muis overheen,
   dan trekt die ene recht en komt hij bovenop de rest te liggen. */
.werk-preview { padding: clamp(64px, 9vw, 130px) var(--pad-x); }

.wp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: clamp(46px, 5.5vw, 68px);
}

/* ---------- 8. SLOT-CTA ---------- */
/* Geen los vlak meer: dit blok zakt naar beneden toe precies in de
   kleur van de footer, zodat je nergens een rand ziet waar het ene
   vak ophoudt en het andere begint. Het roze zit alleen nog bovenin
   als gloed, en is onderaan helemaal verdwenen. */
/* Geen eigen achtergrond en geen verloop meer. De hele pagina is
   één donker vlak; alleen het inhuurblok onderbreekt dat bewust in
   het roze. Daardoor zijn er nergens randen tussen secties, en is de
   enige overgang die je ziet die naar de footer, en die wordt door de
   vervaging in core.css opgevangen. */
.slot {
  padding: clamp(64px, 9vw, 130px) var(--pad-x) clamp(80px, 11vw, 150px);
}
.slot-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(34px, 6vw, 80px);
  align-items: center;
}
.slot-kop {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 7rem);
  line-height: .88;
  text-transform: uppercase;
  margin: 20px 0 22px;
}
.slot-sub {
  font-size: var(--t-body);
  color: var(--pg-mut);
  line-height: 1.85;
  max-width: 46ch;
}
.slot-acties {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.slot-nr {
  font-family: var(--display);
  font-size: var(--t-xl);
  color: var(--roze);
  letter-spacing: .01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--snel), transform var(--snel);
}
.slot-nr:hover { color: var(--geel); transform: scale(1.03); }
.slot-btns { display: flex; gap: 11px; flex-wrap: wrap; justify-content: flex-end; }
.slot-fijn { font-size: var(--t-klein); color: var(--pg-mut); text-align: right; }
.slot-fijn a { color: #fff; border-bottom: 1px solid var(--roze); }
.slot-fijn a:hover { color: var(--roze); }

/* ============================================================
   RESPONSIVE
   ============================================================ */


@media (max-width: 1080px) {
  .baan-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .zelf-in { grid-template-columns: 1fr; }
  .slot-in { grid-template-columns: 1fr; }
  .slot-acties { align-items: flex-start; }
  .slot-btns   { justify-content: flex-start; }
  .slot-fijn   { text-align: left; }
  .punchline::after { display: none; }
}

@media (max-width: 620px) {
  .baan-grid { grid-template-columns: 1fr; }
  .wp-head { align-items: flex-start; }
}

/* ---------- INHUUR: PROJECTMANAGEMENT ----------
   Vol roze, over de hele breedte, met ink erop. Dat is het hardste
   contrast van de site en het onderbreekt de donkere pagina, precies
   wat je wilt als je een andere lezer aanspreekt. */
.inhuur {
  background: var(--roze);
  color: var(--ink);
  padding: clamp(56px, 7.5vw, 104px) var(--pad-x);
}

.inhuur-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.inhuur-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(22, 22, 26, .68);
  margin-bottom: 14px;
}

.inhuur-kop {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  line-height: .88;
  letter-spacing: -.018em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.inhuur-lead {
  font-size: var(--t-lead);
  line-height: 1.8;
  max-width: 52ch;
  margin-bottom: 16px;
}

.inhuur .btn-ink { margin-top: 14px; }

@media (max-width: 900px) {
  .inhuur-in { grid-template-columns: 1fr; }
}


/* ---------- HET PSSST-BLOKJE ----------
   Geen los grapje in een eigen stijl meer, maar hetzelfde middel als
   de knoppen: een dicht vlak met daaroverheen een lege rechthoek in
   de andere kleur, net verschoven. Staat linksonder op de foto. */
.geheim {
  position: absolute;
  /* de foto begint op eenderde van het raster, dus daar hangt hij op */
  left: 36%;
  bottom: clamp(22px, 4.6vw, 60px);
  z-index: 4;
  width: clamp(178px, 17vw, 218px);
  padding: 14px 15px 15px;
  background: var(--geel);
  color: var(--ink);
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-2);
}

/* de roze lijn die net verspringt, precies zoals bij .btn-app */
.geheim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--roze);
  border-radius: var(--ronding);
  transform: translate(var(--vspr), var(--vspr));
  transition: transform var(--snel);
}
.geheim:hover::after { transform: translate(0, 0); }

.geheim-kop {
  display: block;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: var(--t-label);
  margin-bottom: 7px;
}
.geheim p {
  font-size: .7rem;
  line-height: 1.6;
}

/* Op smalle schermen past het blokje niet meer op de foto en zakt het
   eronder. Let op: relative en niet static, anders zoekt de gele lijn
   een ander houvast en rekt hij zich om de hele foto heen. */
@media (max-width: 900px) {
  /* geen zwevend blokje meer: hij wordt een gewone rij onder de foto
     en de tekst, over de volle breedte */
  .geheim {
    position: relative;
    left: auto;
    bottom: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    max-width: none;
    margin: 26px 0 10px;
  }
}

/* ---------- 4b. DIENSTEN ALS UITKLAPLIJST ----------
   Vier kaarten met alles opengeklapt zijn op een telefoon een muur
   tekst. Zes regels waarvan je er zelf één opent is een lijst. Dicht
   is dit blok nog geen schermhoogte hoog.

   Uit de trends van 2026:
   8  de structuur blijft in het zicht: kale haarlijnen, geen
      afgeronde vlakjes, geen schaduwen
   7  binnen dit blok maar één accentkleur, geel, en die verschijnt
      alleen bij wat openstaat
   1  de namen staan niet allemaal even ver ingesprongen en de
      pijltjes staan een halve graad scheef, dus het raster is
      met de hand nagelopen in plaats van uitgerekend
   5  diepte alleen waar het de rangorde helpt: het open vak zakt
      een tint donkerder weg, verder niets */
.dv {
  margin-top: clamp(34px, 4.4vw, 56px);
  border-top: 2px solid var(--pg-lijn);
}

.dv-vak { border-bottom: 1px solid var(--pg-lijn); }
.dv-vak:last-child { border-bottom: 2px solid var(--pg-lijn); }

.dv-vak > summary {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(16px, 2vw, 22px) 4px;
  cursor: pointer; list-style: none;
  transition: background var(--snel), padding-left var(--snel);
}
.dv-vak > summary::-webkit-details-marker { display: none; }
.dv-vak > summary:hover { background: #16161c; padding-left: 12px; }
.dv-vak > summary:focus-visible { outline: 3px solid var(--geel); outline-offset: -3px; }

.dv-teken {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 700;
  color: var(--pg-mut); letter-spacing: .06em; flex: none;
  transition: color var(--snel), transform var(--snel);
}
/* met de hand nagelopen: niet elk pijltje staat even recht */
.dv-vak:nth-child(2n) .dv-teken { transform: rotate(-1.2deg); }
.dv-vak:nth-child(3n) .dv-teken { transform: rotate(.9deg); }

.dv-naam {
  flex: 1;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 2.9vw, 1.85rem);
  line-height: 1.04; text-transform: uppercase; letter-spacing: -.01em;
  transition: color var(--snel), transform var(--snel);
}
.dv-vak:nth-child(2n) .dv-naam { transform: translateY(-1px); }
.dv-vak:nth-child(5n) .dv-naam { transform: translateY(1px); }

/* het plusje: twee streepjes, waarvan er één verdwijnt bij open */
.dv-plus {
  position: relative; flex: none; width: 18px; height: 18px;
}
.dv-plus::before, .dv-plus::after {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 2px; background: var(--pg-fg);
  transition: transform var(--snel), background var(--snel);
}
.dv-plus::after { transform: rotate(90deg); }

.dv-vak[open] > summary { background: #16161c; padding-left: 12px; }
.dv-vak[open] .dv-teken { color: var(--geel); }
.dv-vak[open] .dv-naam  { color: var(--geel); }
.dv-vak[open] .dv-plus::before,
.dv-vak[open] .dv-plus::after { background: var(--geel); }
.dv-vak[open] .dv-plus::after { transform: rotate(0deg); }

/* ---------- wat eronder vandaan komt ---------- */
.dv-uit {
  padding: 2px 4px clamp(24px, 3vw, 34px) clamp(12px, 3.4vw, 46px);
  background: #131318;
}
.dv-uit p {
  font-size: var(--t-body); line-height: 1.85; color: var(--pg-mut);
  max-width: 68ch;
}
.dv-uit p + p, .dv-uit ul + p { margin-top: 12px; }
.dv-uit b { color: var(--pg-fg); font-weight: 700; }
.dv-uit a {
  color: var(--geel); font-weight: 700;
  border-bottom: 2px solid rgba(255, 210, 63, .4);
  transition: border-color var(--snel);
}
.dv-uit a:hover { border-bottom-color: var(--geel); }

.dv-uit ul {
  list-style: none; margin: 14px 0 0;
  display: flex; flex-direction: column; gap: 9px;
}
.dv-uit li {
  position: relative; padding-left: 22px;
  font-size: var(--t-klein); line-height: 1.65; color: #c2c2cc;
}
.dv-uit li::before {
  content: "\2192"; position: absolute; left: 0;
  color: var(--geel); font-weight: 700;
}

@media (max-width: 620px) {
  .dv-vak > summary { gap: 10px; padding: 15px 2px; }
  .dv-uit { padding-left: 14px; padding-right: 2px; }
  .dv-plus { width: 15px; height: 15px; }
  .dv-plus::before, .dv-plus::after { width: 15px; top: 7px; }
}


/* ---------- DE UITSMIJTER VAN DE VIER BANEN ----------
   "Ik neem er drie van je over" is de zin waar het hele blok naartoe
   werkt, dus die mag groot. In Geist, net als de kop bovenaan, zodat
   de twee grote uitspraken op de pagina dezelfde stem hebben. */
.punchline {
  margin-top: clamp(34px, 4.4vw, 60px);
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 2px solid var(--pg-lijn);
}
.punch-groot {
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 4.4rem);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

/* ---------- DE PIXELPIJL ----------
   Drie pijlpunten van elk vijf blokjes, die om de beurt oplichten van
   boven naar beneden. Daardoor lijkt het alsof de pijl naar het
   volgende blok loopt. Het is ook echt een link daarnaartoe, dus hij
   doet iets in plaats van alleen te wijzen. */
.pixelpijl {
  --pp: clamp(7px, .8vw, 10px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: clamp(30px, 4.4vw, 56px) auto 0;
  width: max-content;
  text-decoration: none;
}
.pp-raster { display: flex; flex-direction: column; gap: calc(var(--pp) * .9); }
.pp-v {
  display: grid;
  grid-template-columns: repeat(5, var(--pp));
  grid-template-rows: repeat(3, var(--pp));
  animation: ppgolf 1.6s ease-in-out infinite;
}
.pp-v i { display: block; background: currentColor; }
/* de vijf blokjes vormen samen een punt naar beneden */
.pp-v i:nth-child(1) { grid-area: 1 / 1; }
.pp-v i:nth-child(2) { grid-area: 2 / 2; }
.pp-v i:nth-child(3) { grid-area: 3 / 3; }
.pp-v i:nth-child(4) { grid-area: 2 / 4; }
.pp-v i:nth-child(5) { grid-area: 1 / 5; }

.pp-v:nth-child(1) { color: var(--roze); animation-delay: 0s; }
.pp-v:nth-child(2) { color: var(--geel); animation-delay: .18s; }
.pp-v:nth-child(3) { color: var(--roze); animation-delay: .36s; }

@keyframes ppgolf {
  0%, 100% { opacity: .22; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(calc(var(--pp) * .5)); }
}

/* geen tekst eronder: alleen de punten. Bij aanwijzen worden ze
   voller, zodat je merkt dat het een link is. */
.pixelpijl:hover .pp-v { animation-duration: 1s; }

@media (prefers-reduced-motion: reduce) {
  .pp-v { animation: none; opacity: .85; }
}


/* ---------- DE VIER PIJLERS ----------

   De gele koppen staan er altijd, dus je ziet in één blik waar het over
   gaat. De uitleg komt pas als je erom vraagt.

   Op een telefoon en tablet tik je op een kop. Op een breed scherm gaan
   ze vanzelf open zodra het blok in beeld komt, want daar is de ruimte
   en hoef je er niets voor te doen. */
/* Het blok eromheen is roze, en geel op roze kun je niet lezen. De
   pijlers staan daarom op een dicht ink-vlak met een schaduw, net als
   het trainingsblok op de werkpagina. Daar knalt het geel wel. */
.pijlers {
  display: flex; flex-direction: column;
  background: var(--ink); color: #f2f0ea;
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-2);
  padding: clamp(6px, 1vw, 12px) clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  position: relative;
}
.pijlers::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--roze) 62%, var(--geel) 62%);
}

.pijler { border-top: 1px solid rgba(242, 240, 234, .12); }
.pijler:first-of-type { border-top: 0; margin-top: 6px; }

.pijler h3 { margin: 0; }
.pijler-knop {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(14px, 1.8vw, 20px) 2px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--geel);
  transition: padding-left var(--snel);
}
.pijler-knop:hover { padding-left: 10px; }
.pijler-knop:focus-visible { outline: 3px solid var(--geel); outline-offset: -3px; }

/* het plusje rechts: twee streepjes waarvan er één verdwijnt */
.pijler-knop::after {
  content: ""; position: relative; flex: none;
  width: 15px; height: 15px;
  background:
    linear-gradient(var(--geel), var(--geel)) center / 15px 2px no-repeat,
    linear-gradient(var(--geel), var(--geel)) center / 2px 15px no-repeat;
  transition: transform var(--snel), background-size var(--snel);
}
.pijler[data-open] .pijler-knop::after {
  background:
    linear-gradient(var(--geel), var(--geel)) center / 15px 2px no-repeat,
    linear-gradient(var(--geel), var(--geel)) center / 2px 2px no-repeat;
  transform: rotate(180deg);
}

/* de uitleg schuift open zonder een vaste hoogte te hoeven kennen */
.pijler-uit {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .42s var(--ease), opacity .34s var(--ease);
}
.pijler-uit > * { min-height: 0; overflow: hidden; }
.pijler[data-open] .pijler-uit { grid-template-rows: 1fr; opacity: 1; }
.pijler-uit p {
  font-size: var(--t-body); line-height: 1.9; color: #b4b4c0;
  padding: 0 2px clamp(16px, 2vw, 24px);
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .pijler-uit, .pijler-knop, .pijler-knop::after { transition: none; }
}

/* ---------- WAT KLANTEN ZEGGEN: HET DOSSIER ----------

   Geen citaat in een kaartje, maar een archiefkaart van wat er gebeurd
   is. Opschriften in de hoeken, het blok genummerd tussen haakjes, één
   uitspraak groot in wijde kapitalen, en daaronder een gegevensblad.
   Het volledige verhaal staat er klein naast.

   De terughouding is hier het ontwerp: geen gekleurde vlakken, geen
   slagschaduwen. Roze en geel komen alleen voor als merkteken van een
   paar pixels. */
.dos {
  position: relative;
  margin-top: clamp(46px, 6vw, 84px);
  padding: clamp(30px, 4vw, 56px) clamp(18px, 3.4vw, 56px) clamp(36px, 4.4vw, 62px);
}
/* ---------- HET BLOK LIGT NOG OP DE TEKENTAFEL ----------

   Geen opschriften in de hoeken meer. In plaats daarvan ziet het blok
   eruit alsof het nog gebouwd moet worden: een gestippeld selectiekader
   met acht greepjes eromheen en twee hulplijnen die er dwars doorheen
   lopen. Precies de taal van de kop bovenaan de pagina. */
.dos-kader {
  position: absolute; inset: clamp(12px, 1.8vw, 22px);
  border: 1px dashed rgba(242, 240, 234, .22);
  pointer-events: none; z-index: 1;
}
/* acht greepjes, zoals een geselecteerd vlak in een ontwerpprogramma */
.dos-kader i {
  position: absolute; width: 7px; height: 7px;
  background: var(--pg-bg); border: 1px solid rgba(255, 79, 139, .75);
}
.dos-kader .h1 { top: -4px; left: -4px; }
.dos-kader .h2 { top: -4px; left: 50%; margin-left: -4px; }
.dos-kader .h3 { top: -4px; right: -4px; }
.dos-kader .h4 { top: 50%; right: -4px; margin-top: -4px; }
.dos-kader .h5 { bottom: -4px; right: -4px; }
.dos-kader .h6 { bottom: -4px; left: 50%; margin-left: -4px; }
.dos-kader .h7 { bottom: -4px; left: -4px; }
.dos-kader .h8 { top: 50%; left: -4px; margin-top: -4px; }

/* de twee hulplijnen die het midden aanwijzen */
.dos-hulp { position: absolute; inset: clamp(12px, 1.8vw, 22px); pointer-events: none; z-index: 1; }
.dos-hulp b { position: absolute; background: rgba(242, 240, 234, .1); }
.dos-hulp .lig { left: 0; right: 0; top: 50%; height: 1px; }
.dos-hulp .sta { top: 0; bottom: 0; left: 50%; width: 1px; }

.dos-in { position: relative; z-index: 2; padding-top: clamp(22px, 2.6vw, 38px); }

/* het lint: geen tweede grote kop, alleen een dunne regel met een
   teller. De pixellogo's eronder dragen het blok. */
.dos-lint {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(242, 240, 234, .14);
  padding-bottom: 10px;
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(242, 240, 234, .4);
}
.dos-lint b { color: rgba(255, 79, 139, .85); }


/* ---------- de klanten als pixellogo ----------
   Het logo wordt in de browser omgetekend naar een raster van blokjes,
   in dezelfde taal als het </>-logo in de kop. Grijs zolang die klant
   uit staat, vol zodra je hem kiest. */
.dos-klanten {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: clamp(24px, 5vw, 80px);
  margin-top: clamp(32px, 4vw, 52px);
}
.dos-klant {
  appearance: none; background: none; border: 0; padding: 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 240, 234, .45);
  transition: color var(--snel), transform var(--snel);
}
.dos-pix {
  display: block;
  width: clamp(120px, 19vw, 230px); height: clamp(120px, 19vw, 230px);
  filter: grayscale(1) brightness(1.5) contrast(.7); opacity: .4;
  transition: filter var(--snel), opacity var(--snel), transform var(--snel);
}
.dos-wie { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.dos-klant:hover { color: var(--pg-fg); }
.dos-klant:hover .dos-pix { filter: none; opacity: .8; transform: translateY(-4px); }
.dos-klant[aria-expanded="true"] { color: #fff; }
.dos-klant[aria-expanded="true"] i { color: var(--geel); }
.dos-klant[aria-expanded="true"] .dos-pix { filter: none; opacity: 1; }
.dos-klant:focus-visible { outline: 2px solid var(--geel); outline-offset: 4px; }

/* ---------- het dossier zelf ---------- */
.dos-blad {
  /* het dossier leest links uitgelijnd, de kop erboven staat gecentreerd */
  text-align: left;
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows .6s var(--ease), opacity .5s var(--ease), margin-top .6s var(--ease);
}
.dos-blad > * { min-height: 0; overflow: hidden; }
.dos[data-open] .dos-blad { grid-template-rows: 1fr; opacity: 1; margin-top: clamp(36px, 4.6vw, 70px); }

.dos-kaart { display: none; }
.dos[data-actief="amber"]  .dos-kaart[data-van="amber"],
.dos[data-actief="zadrak"] .dos-kaart[data-van="zadrak"] { display: block; }

.dos-nr {
  font-family: var(--mono);
  font-size: .56rem; font-weight: 500; letter-spacing: .2em;
  color: rgba(242, 240, 234, .35);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(242, 240, 234, .12);
}

/* de uitspraak: groot, in wijde kapitalen, over korte regels */
.dos-uit {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.3vw, 1.85rem);
  line-height: 1.34; letter-spacing: .01em;
  text-transform: uppercase; color: #f2f0ea;
  max-width: 24ch;
  transform: translateY(16px);
  transition: transform .6s var(--ease) .1s;
}
.dos[data-open] .dos-uit { transform: translateY(0); }

/* het gegevensblad, en het volledige verhaal ernaast */
.dos-blad-in {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
  margin-top: clamp(32px, 4vw, 54px);
  align-items: start;
}
.dos-tabel { display: grid; }
.dos-tabel div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(242, 240, 234, .1);
}
.dos-tabel .lb {
  font-family: var(--mono); font-size: .56rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 240, 234, .35);
}
.dos-tabel .wd { font-size: .78rem; line-height: 1.6; color: #d6d6de; }

.dos-kop {
  font-family: var(--mono);
  font-size: .56rem; font-weight: 500; letter-spacing: .2em;
  color: rgba(242, 240, 234, .35); margin-bottom: 14px;
}
.dos-citaat p { font-size: .78rem; line-height: 1.95; color: var(--pg-mut); }
.dos-citaat p + p { margin-top: 11px; }
.dos-naam {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(242, 240, 234, .12);
  font-family: var(--mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--geel);
}

@media (max-width: 860px) {
  .dos-blad-in { grid-template-columns: 1fr; }
  .dos-uit { max-width: none; }
  .dos-tabel div { grid-template-columns: 7rem 1fr; gap: 12px; }
}
@media (max-width: 520px) {
  .dos-klanten { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dos-tabel div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dos-blad, .dos-uit { transition: none; }
}


/* ---------- DE KNOP NAAR HET PORTFOLIO ----------

   Deze mag raar zijn, dus hij doet vier dingen tegelijk:

   1  hij staat scheef, en bij aanwijzen kantelt hij de andere kant op
   2  de schaduw springt daarbij van rechtsonder naar linksonder, en
      wisselt van roze naar geel
   3  de letters rammelen even door elkaar en vallen dan terug op hun
      plek, alsof er iets wordt ontsleuteld
   4  er spatten vier pixels van de hoeken af

   De tekst zelf staat altijd recht: de scheefstand zit op het vlak en
   wordt op de inhoud teruggedraaid. */
.pf-knop {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 28px;
  background: var(--ink); color: #f2f0ea;
  border: 3px solid #f2f0ea;
  font-family: var(--mono); font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transform: skewX(-5deg);
  box-shadow: 9px 9px 0 var(--roze);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
/* de inhoud draait de scheefstand terug, anders staat de tekst scheef */
.pf-knop .pf-woord,
.pf-knop .pf-teken { display: inline-block; transform: skewX(5deg); transition: transform .2s var(--ease); }

.pf-knop .pf-woord { min-width: 17ch; }   /* zodat hij niet wiebelt tijdens het rammelen */
.pf-knop .pf-teken { color: var(--geel); letter-spacing: -.05em; transition: transform .2s var(--ease), color .2s var(--ease); }

.pf-knop:hover,
.pf-knop:focus-visible {
  transform: skewX(5deg) translate(-3px, -3px);
  box-shadow: -9px 9px 0 var(--geel);
  background: var(--roze); color: var(--ink); border-color: var(--ink);
}
.pf-knop:hover .pf-woord,
.pf-knop:focus-visible .pf-woord,
.pf-knop:hover .pf-teken,
.pf-knop:focus-visible .pf-teken { transform: skewX(-5deg); }
.pf-knop:hover .pf-teken, .pf-knop:focus-visible .pf-teken { color: var(--ink); }

.pf-knop:active { transform: skewX(5deg) translate(6px, 6px); box-shadow: -2px 2px 0 var(--geel); }

/* de pixels die van de hoeken af spatten */
.pf-spat {
  position: absolute; width: 9px; height: 9px;
  background: var(--geel);
  opacity: 0; transform: scale(.4);
  transition: opacity .24s var(--ease), transform .32s var(--ease);
  pointer-events: none;
}
.pf-spat.s1 { top: -16px; left: 12%; background: var(--roze); }
.pf-spat.s2 { top: -22px; right: 22%; }
.pf-spat.s3 { bottom: -18px; left: 26%; }
.pf-spat.s4 { bottom: -14px; right: 8%; background: var(--roze); width: 6px; height: 6px; }

.pf-knop:hover .pf-spat,
.pf-knop:focus-visible .pf-spat { opacity: 1; transform: scale(1) translateY(-4px); }
.pf-knop:hover .pf-spat.s2 { transition-delay: .05s; }
.pf-knop:hover .pf-spat.s3 { transition-delay: .1s; transform: scale(1) translateY(5px); }
.pf-knop:hover .pf-spat.s4 { transition-delay: .14s; transform: scale(1) translateY(6px); }

@media (max-width: 620px) {
  .pf-knop { font-size: .7rem; padding: 15px 20px; gap: 10px; box-shadow: 6px 6px 0 var(--roze); }
  .pf-knop:hover { box-shadow: -6px 6px 0 var(--geel); }
  .pf-knop .pf-woord { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-knop, .pf-knop .pf-woord, .pf-knop .pf-teken, .pf-spat { transition: none; }
  .pf-knop { transform: none; }
  .pf-knop .pf-woord, .pf-knop .pf-teken { transform: none; }
}

/* de twee regels onder de grote uitspraak bij de vier banen */
.punch-na {
  font-size: var(--t-lead); line-height: 1.8; color: var(--pg-mut);
  max-width: 54ch; margin-top: clamp(14px, 1.8vw, 22px);
}
.punch-na:first-of-type { color: var(--pg-fg); }

/* de showreel staat in het blok van de vier banen, dus hij heeft hier
   zijn eigen bovenmarge nodig */
.punchline + .reel-doos { margin-top: clamp(30px, 4.4vw, 56px); }
.pijlrij { display: flex; justify-content: center; margin-top: clamp(26px, 3.4vw, 44px); }

/* ---------- HET STARTBEELD VAN DE SHOWREEL ----------
   Geen behang en geen lopende banden meer: één pixeldriehoek en één
   regel. Dezelfde taal als het </>-logo in de kop, en de regel zegt
   meteen waar het filmpje over gaat. Daaronder volgen de diensten,
   dus die kop hoeft daar niet nog een keer te staan. */
.pix-knop {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 34px);
  text-align: center;
  background: var(--ink);
}

/* de driehoek, opgebouwd uit blokjes */
.pp-play {
  --pb: clamp(6px, 1vw, 12px);
  display: grid;
  grid-template-columns: repeat(15, var(--pb));
  grid-template-rows: repeat(15, var(--pb));
  gap: calc(var(--pb) * .16);
}
.pp-play i { display: block; transition: background var(--snel); }
.pp-play i.rand { background: rgba(242, 240, 234, .75); }
.pp-play i.vul  { background: var(--roze); }
.pix-knop:hover .pp-play i.rand { background: var(--geel); }
.pix-knop:hover .pp-play i.vul  { background: var(--geel); }

.pix-tekst {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 3.6vw, 3rem);
  line-height: 1.02; text-transform: uppercase; letter-spacing: -.01em;
  color: #fff;
  max-width: 18ch;
  transition: color var(--snel);
}
.pix-knop:hover .pix-tekst { color: var(--geel); }

/* de balk onderin maakt er een speler van in plaats van een plaatje */
.pix-balk {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(14px, 2vw, 24px);
  background: rgba(8, 8, 11, .55);
  border-top: 2px solid rgba(242, 240, 234, .18);
}
.pix-tijd {
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .12em; color: rgba(242, 240, 234, .6); flex: none;
}
.pix-spoor {
  flex: 1; height: 8px;
  /* een spoor van losse blokjes, niet één gladde balk */
  background: repeating-linear-gradient(90deg,
    rgba(242, 240, 234, .22) 0 8px, transparent 8px 11px);
}
.pix-vol {
  display: block; width: 18%; height: 100%;
  background: repeating-linear-gradient(90deg,
    var(--roze) 0 8px, transparent 8px 11px);
  transition: width var(--snel);
}
.pix-knop:hover .pix-vol { width: 26%; }
@media (max-width: 620px) { .pix-balk { gap: 10px; padding: 10px 12px; } }

/* ---------- AANRAAKVLAKKEN OP EEN TELEFOON ---------- */
@media (max-width: 760px) and (pointer: coarse) {
  /* het rijtje diensten onder de knop was 14 pixels hoog */
  .dienstenrij { gap: 2px 20px; }
  .dienstenrij a { display: inline-block; padding: 11px 0; }

  .band-link { display: inline-block; padding: 9px 0; }
  /* het grote telefoonnummer onderaan */
  .slot-nr { display: inline-block; padding: 8px 0; }
  .dos-klant { padding: 12px 8px; }
}