/* Ontwerpvoorstel (staging): karaktervolle koppen in Fraunces, verzadigde vlakken met golvende overgangen,
   pillknoppen en vacatures als briefjes op een prikbord. Bovenop stijl.css, zodat het in één keer terug kan. */
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-kop.woff2") format("woff2");font-weight:600 900;font-display:swap}
:root{--display:"Fraunces",Georgia,serif}

/* Koppen */
h1,.sectie h2,.meer-sectie h2,.zoekblokken h2{font-family:var(--display);font-weight:800;letter-spacing:-.022em;font-optical-sizing:auto}
.hero h1{font-weight:900;line-height:.98}
.sectie h2{line-height:1.02}

/* Knoppen als pillen */
.knop{border-radius:999px;padding:15px 26px}
.zoek{border-radius:999px;padding:6px 6px 6px 10px}
.zoek .knop{padding-inline:28px}
@media (min-width:721px){.zoek{grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) auto}}
.veld:focus-within{border-radius:999px}

/* Golf onderaan een vlak */
.golf{display:block;width:100%;height:clamp(48px,7vw,110px);margin-top:-1px}
.golf.om{transform:scaleX(-1)}
.hero.home,.vlak-kobalt{padding-bottom:0 !important}
.hero.home > .golf,.vlak-kobalt > .golf{margin-top:clamp(56px,8vw,112px)}

/* Home: tekst links, briefjes rechts */
.hero.home{padding-top:clamp(40px,6vw,88px)}
.home-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:center}
.hero.home h1{font-size:clamp(3rem,5.1vw,5rem);max-width:none}
.briefjes{list-style:none;margin:0;padding:0;display:grid;gap:40px;justify-items:center}
.briefje{position:relative;width:100%;max-width:320px;background:var(--wit);border:1.5px solid var(--inkt);border-radius:6px;box-shadow:0 18px 30px -22px rgba(22,21,28,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.briefje:nth-child(1){transform:rotate(-2.2deg) translateX(-14px)}
.briefje:nth-child(2){transform:rotate(1.6deg) translateX(18px)}
.briefje:nth-child(3){transform:rotate(-1deg) translateX(-4px)}
.briefje:hover{transform:rotate(0) translateY(-4px)}
.briefje a{display:grid;gap:4px;padding:26px 22px 20px;color:var(--inkt);text-decoration:none}
.briefje b{font-family:var(--kop);font-size:1.15rem;line-height:1.15;letter-spacing:-.02em}
.briefje span{font-size:15px;color:var(--grijs)}
.briefje .bedrag{margin-top:8px;font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--inkt)}
.prik{fill:currentColor;position:absolute;top:-16px;left:50%;margin-left:-15px;color:var(--kobalt);filter:drop-shadow(0 3px 2px rgba(22,21,28,.3));pointer-events:none;z-index:3}
.briefje .prik{margin-left:-17px;color:var(--kobalt)}

/* Verzadigd kobalt vlak met het prikbord */
.vlak-kobalt{background:var(--kobalt);color:var(--wit)}
.vlak-kobalt h2{color:var(--wit)}
.vlak-kobalt .kaart{color:var(--inkt)}
.prikbord{gap:44px 28px;margin-top:64px}
.geprikt{position:relative}
.geprikt:nth-child(3n+1){transform:rotate(-.8deg)}
.geprikt:nth-child(3n+2){transform:rotate(.6deg) translateY(10px)}
.geprikt:nth-child(3n){transform:rotate(-.3deg)}
.geprikt .prik{color:var(--geel)}
.geprikt .kaart{height:100%;border-color:var(--inkt);border-radius:8px;box-shadow:0 22px 40px -26px rgba(5,10,60,.75)}
.geprikt:hover .kaart{transform:rotate(0) translateY(-4px)}
.vlak-kobalt .meer{margin-top:56px}
.vlak-kobalt .knop-geel{border-color:var(--geel)}

/* Uitleg op steen sluit direct aan op de golf */
.nieuwste + .sectie.steen{padding-top:72px}

/* Woorden die binnenkomen: overflow per woord, zodat ze van onderen opschuiven */
.woord{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.woord > span{display:inline-block}

@media (max-width:900px){
  .home-raster{grid-template-columns:minmax(0,1fr)}
  .briefjes{display:none}
}
@media (max-width:720px){
  .hero.home h1{font-size:clamp(2rem,9.2vw,2.6rem);max-width:none}
  .zoek{grid-template-columns:1fr;border-radius:24px;padding:6px}
  .veld:focus-within{border-radius:16px}
  .prikbord{gap:36px;margin-top:40px}
  .geprikt:nth-child(n){transform:none}
}
@media (prefers-reduced-motion:reduce){
  .briefje,.geprikt .kaart{transition:none}
}

/* Vacature: titel op het blauwe vlak, daaronder de afweegfeiten als rij grote waarden */
.vac-kop.vlak-kobalt{position:relative;overflow:hidden;padding-top:28px}
.vac-kop.vlak-kobalt .wrap{position:relative;z-index:1;gap:18px}
.vac-kop.vlak-kobalt h1{color:var(--wit);font-size:clamp(2.6rem,5.4vw,5.2rem);max-width:18ch;line-height:1}
.vac-kop.vlak-kobalt .vac-wg{color:rgba(255,255,255,.85)}
.vac-kop.vlak-kobalt .vac-wg a{color:var(--wit)}
.vac-kop.vlak-kobalt .kruimels a,.vac-kop.vlak-kobalt .kruimels [aria-current]{color:var(--wit)}
.vac-kop.vlak-kobalt .kruimels li + li::before{color:rgba(255,255,255,.6)}
.vac-kop.vlak-kobalt .soort{border-color:var(--wit);color:var(--inkt)}
.vac-kop.vlak-kobalt .soort.ai{color:var(--wit);border-color:var(--wit)}
.vac-kop.vlak-kobalt .knop-geel{border-color:var(--geel);font-size:17px;padding:16px 28px;margin-top:6px}
.vac-kop.vlak-kobalt .gesloten{background:var(--wit);color:var(--inkt);border-radius:var(--r)}
.vac-kop.vlak-kobalt > .golf{margin-top:clamp(40px,6vw,88px)}
.punaise-groot{position:absolute;right:-30px;top:40px;fill:var(--geel);transform:rotate(18deg);pointer-events:none}
.band{display:flex;flex-wrap:wrap;gap:22px 48px;margin:40px 0 0;padding:0}
.band div{display:grid;gap:4px;min-width:0}
.band dt{font-size:15px;color:rgba(255,255,255,.75)}
.band dd{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.1;color:var(--wit)}
.band dd a{color:var(--wit);text-decoration-color:var(--geel)}
@media (max-width:1100px){.punaise-groot{width:160px;height:160px;right:-40px;top:auto;bottom:90px;opacity:.5}}
@media (max-width:720px){
  .vac-kop.vlak-kobalt h1{font-size:clamp(2rem,8.6vw,2.6rem)}
  .band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:28px}
  .punaise-groot{display:none}
}

/* Zoekpagina: gele kop golft over in de filterbalk */
.hero.lijst-hero{padding-bottom:0}
.hero.lijst-hero > .golf{margin-top:40px}
.hero.lijst-hero h1{font-size:clamp(2.4rem,4.6vw,4.2rem);max-width:22ch}
.lijst-hero + .filters{border-top:0;margin-top:-1px}
.bord .teller{font-family:var(--display);font-weight:800;letter-spacing:-.02em}

/* Footer: inkt vlak dat met een golf binnenkomt, met een laatste uitnodiging om te zoeken */
footer{position:relative;background:var(--inkt);color:var(--wit);border-top:0 !important}
.voet-golf{position:absolute;left:0;bottom:calc(100% - 2px);width:100%;height:clamp(48px,7vw,110px);fill:var(--inkt);display:block;transform:scaleX(-1)}
footer .wrap{padding-block:40px 48px;gap:28px 24px}
footer a,.voet-zoek a,.voet-nav a{color:var(--wit)}
footer a:hover{color:var(--geel)}
footer .woordmerk{color:var(--geel)}
.voet-slot{width:100%;order:-2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-bottom:48px}
.voet-kop{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.02em;max-width:16ch}
.voet-slot .knop-geel{border-color:var(--geel);font-size:17px;padding:16px 30px}
.voet-zoek h2{color:rgba(255,255,255,.7);font-weight:600}
footer :focus-visible{outline-color:var(--geel)}
/* De golf van de footer valt over de onderkant van het laatste vlak; dat vlak krijgt er ruimte voor. */
main > :last-child{padding-bottom:calc(clamp(48px,7vw,110px) + 72px)}

/* Bedrijfspagina: gele kop met golf, de beginletter als geprikt briefje */
.bedrijf-kop{padding-bottom:0}
.bedrijf-kop > .golf{margin-top:clamp(40px,6vw,80px)}
.bedrijf-kop h1{font-size:clamp(2.6rem,5.4vw,5rem);line-height:1}
.bedrijf-titel{gap:28px}
.wg-briefje{position:relative;flex:none;display:grid;place-items:center;width:96px;height:96px;background:var(--wit);border:1.5px solid var(--inkt);border-radius:6px;font-family:var(--display);font-weight:900;font-size:3rem;color:var(--inkt);transform:rotate(-4deg);box-shadow:0 16px 26px -18px rgba(22,21,28,.6)}
.wg-briefje .prik{color:var(--kobalt);top:-15px}

/* Kaarten overal als briefjes: minder rond, en bij hover een fractie scheef */
.kaart{border-radius:10px}
.kaart h3 a::after{border-radius:10px}
.kaart:hover{transform:translateY(-3px) rotate(-.4deg)}
@media (max-width:720px){
  .wg-briefje{width:68px;height:68px;font-size:2.1rem}
  .bedrijf-kop h1{font-size:clamp(2rem,8.6vw,2.6rem)}
}
@media (prefers-reduced-motion:reduce){.kaart:hover{transform:none}}