/* ===========================================================
   TeFra Group bv — demo 2 "krijtbord"
   Eigen, modernere richting: warm antraciet + koper, ruimere
   typografie, kaarten met accentbalk, en een krijtbordmotief
   dat gericht wordt ingezet bij "onze aanpak" en citaten.
   =========================================================== */

/* ---------- Lettertypen: Manrope (body/koppen) + Caveat (krijtaccent) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Manrope-400.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Manrope-500.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Manrope-600.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Manrope-700.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Manrope-800.ttf') format('truetype');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Caveat-600.ttf') format('truetype');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Caveat-700.ttf') format('truetype');}
/* Architects Daughter: het handschrift van de bouwtekening, voor
   notities en nummers op het bord. Caveat blijft voor de grote koppen. */
@font-face{font-family:'Architects Daughter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ArchitectsDaughter-400.woff2') format('woff2');}

/* ---------- Tokens ----------
   Merkkleur: diep antraciet-groen, WCAG-gecontroleerd.
   #20342e op wit → contrast > 13:1 (--merk-vlak, vlakken met witte tekst)
   #b5502d koper voor randen/bullets/accent (contrast niet relevant daar,
   maar koper op wit haalt zelf ruim 5:1 en is dus ook bruikbaar op badges)
   hover op koper altijd donkerder, nooit lichter
*/
:root{
  --merk-vlak:#20342e;
  --merk-vlak-hover:#152420;
  --merk:#b5502d;
  --merk-hover:#8a3c1f;
  --inkt:#1c221f;
  --inkt-zacht:#5b645e;
  --lijn:#e4ddd0;
  --vlak:#fdfbf7;
  --vlak-zacht:#f3efe6;
  --vlak-diep:#141c19;
  --krijt-bg:#1d2723;
  --krijt-tekst:#eceee4;
  --krijt-geel:#f0d99a;
  --schaduw:0 20px 44px -22px rgba(20,28,25,.38);
  --schaduw-zacht:0 8px 22px -12px rgba(20,28,25,.28);
  --radius:18px;
  --duur:.4s;
  --lettertype:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --lettertype-krijt:'Caveat','Segoe Script',cursive;
  --lettertype-hand:'Architects Daughter','Segoe Print',cursive;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Het gesloten mobiele menu staat als vaste laag rechts buiten beeld en maakte
   de pagina daardoor horizontaal scrollbaar. Op html (niet op body of een
   wrapper) blijft position:sticky in de kop gewoon werken; overflow-x:clip
   helpt hier niet, want dat clipt geen position:fixed nakomelingen. */
html{overflow-x:hidden;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;font-family:var(--lettertype);color:var(--inkt);background:var(--vlak);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--merk-vlak);text-decoration:none;}
a:hover{color:var(--merk-hover);text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--lettertype);font-weight:800;line-height:1.12;margin:0 0 .5em;color:var(--inkt);letter-spacing:-.02em;}
h1{font-size:clamp(2.1rem,4.4vw + .6rem,3.7rem);}
/* Sectiekoppen buiten het bord staan in hetzelfde handschrift, maar in
   inkt op papier in plaats van krijt op lei — zo loopt het motief door
   de hele pagina door zonder te doen alsof er krijt op crème ligt.
   Bewust alleen h2: h3 zijn kaarttitels en die moeten scanbaar blijven,
   en een heel scherm handschrift leest niet meer als een ingenieursbureau. */
h2{
  font-family:var(--lettertype-krijt);font-weight:700;
  font-size:clamp(1.9rem,3.2vw + .6rem,3rem);letter-spacing:0;line-height:1.06;
}
h3{font-size:1.28rem;font-weight:700;}
p{margin:0 0 1em;color:var(--inkt-zacht);}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}

.omhulsel{max-width:1240px;margin:0 auto;padding:0 24px;}
.tip-binnen{max-width:760px;}
.tip-binnen--midden{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;}

section{padding:96px 0;}
@media (max-width:720px){section{padding:60px 0;}}
.sectie--zacht{background:var(--vlak-zacht);}
.sectie--donker{background:var(--vlak-diep);color:#e9e4da;}
.sectie--donker h2,.sectie--donker h3{color:#fff;}
.sectie--donker p{color:#c3beb2;}

.kop-blok{margin-bottom:52px;}
.voorkop{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--merk);margin-bottom:12px;}
.voorkop::before{content:'';width:22px;height:2px;background:var(--merk);display:inline-block;}
.sectie--donker .voorkop{color:#d98a5f;}

/* ---------- Beeldmerk ---------- */
.beeldmerk{display:block;height:auto;object-fit:contain;}
.beeldmerk--kop{width:auto;height:48px;}
.beeldmerk--held{width:auto;height:68px;}
.beeldmerk--voet{width:auto;height:42px;filter:brightness(0) invert(1);}
@media (max-width:600px){.beeldmerk--kop{height:40px;}}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:100px;
  font-weight:700;font-size:.97rem;border:1.5px solid transparent;cursor:pointer;
  transition:transform var(--duur) cubic-bezier(.2,.8,.2,1),background var(--duur),box-shadow var(--duur),color var(--duur),border-color var(--duur);
  text-decoration:none;line-height:1;
}
.knop:hover{text-decoration:none;}
.knop--vol{background:var(--merk);color:#fff;box-shadow:var(--schaduw-zacht);}
.knop--vol:hover{background:var(--merk-hover);color:#fff;transform:translateY(-3px) rotate(-.3deg);box-shadow:var(--schaduw);}
.knop--lijn{background:transparent;border-color:var(--lijn);color:var(--inkt);}
.knop--lijn:hover{border-color:var(--merk-vlak);color:var(--merk-vlak);transform:translateY(-3px);}
.sectie--donker .knop--lijn{border-color:rgba(255,255,255,.4);color:#fff;}
.sectie--donker .knop--lijn:hover{border-color:#d98a5f;color:#d98a5f;}
.knop--klein{padding:10px 18px;font-size:.86rem;}

/* ---------- Header ---------- */
.kop{position:sticky;top:0;z-index:100;background:rgba(253,251,247,.92);backdrop-filter:blur(10px);border-bottom:2px solid var(--inkt);}
.kop__balk{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.kop__logo{display:flex;align-items:center;gap:10px;}
.kop__nav{display:flex;align-items:center;gap:4px;}
.kop__nav a{padding:10px 16px;border-radius:100px;color:var(--inkt);font-weight:600;font-size:.92rem;letter-spacing:.01em;transition:background var(--duur),color var(--duur);}
.kop__nav a:hover{background:var(--vlak-zacht);color:var(--merk);text-decoration:none;}
.kop__nav a.actief{background:var(--merk-vlak);color:#fff;}
.kop__acties{display:flex;align-items:center;gap:16px;}
.kop__tel{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.94rem;color:var(--inkt);}
.kop__hamburger{display:none;background:none;border:none;padding:8px;cursor:pointer;}
.kop__hamburger span{display:block;width:24px;height:2.5px;background:var(--inkt);margin:5px 0;border-radius:2px;transition:transform var(--duur),opacity var(--duur);}

@media (max-width:960px){
  .kop__nav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100vh;background:var(--vlak);flex-direction:column;align-items:stretch;padding:92px 22px 24px;transform:translateX(100%);transition:transform var(--duur) ease;box-shadow:-18px 0 44px -20px rgba(20,28,25,.4);overflow-y:auto;}
  .kop__nav.open{transform:translateX(0);}
  .kop__nav a{padding:15px 14px;font-size:1.06rem;border-bottom:1px solid var(--lijn);border-radius:0;}
  .kop__nav a.actief{background:none;color:var(--merk);}
  .kop__hamburger{display:block;z-index:110;}
  .kop__hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .kop__hamburger.open span:nth-child(2){opacity:0;}
  .kop__hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .kop__tel span.tel-tekst{display:none;}
}
.kop__scrim{display:none;position:fixed;inset:0;background:rgba(20,28,25,.5);z-index:95;}
.kop__scrim.open{display:block;}

/* ---------- Paginakop ----------
   De asymmetrische kaartsplit (.held__beeld, .held__beeld-kaart,
   .held__beeld-accent, .held__kicker) is vervallen: elke pagina opent nu
   op het bord, met de foto eróp geprikt. Die regels stonden hier nog
   ongebruikt — zie de bordkop verderop in dit bestand. */
.held{position:relative;overflow:hidden;background:var(--vlak-zacht);padding:76px 0 0;}
.held--klein{padding:56px 0 0;}
.held__raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center;padding-bottom:76px;}
.held--klein .held__raster{padding-bottom:56px;align-items:end;}
.held h1{max-width:640px;}
.held p.held__intro{max-width:560px;font-size:1.14rem;}
.held__acties{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px;}
@media (max-width:900px){
  .held__raster{grid-template-columns:minmax(0,1fr);gap:36px;padding-bottom:48px;}
}

/* ---------- Kaarten / grids ---------- */
.raster{display:grid;gap:30px;}
.raster--3{grid-template-columns:repeat(3,1fr);}
.raster--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:920px){.raster--3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.raster--3,.raster--2{grid-template-columns:1fr;}}

.kaart{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
  transition:transform var(--duur) cubic-bezier(.2,.8,.2,1),box-shadow var(--duur);display:flex;flex-direction:column;height:100%;
  position:relative;
}
.kaart::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--merk);transform:scaleX(0);transform-origin:left;transition:transform var(--duur);}
.kaart:hover{transform:translateY(-8px) rotate(-.3deg);box-shadow:var(--schaduw);}
.kaart:hover::before{transform:scaleX(1);}
.kaart__beeld{aspect-ratio:4/3;overflow:hidden;}
.kaart__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.kaart:hover .kaart__beeld img{transform:scale(1.07);}
.kaart__body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column;}
.kaart__body h3{margin-bottom:9px;}
.kaart__body p{flex:1;}
.kaart__link{font-weight:700;font-size:.92rem;margin-top:10px;display:inline-flex;align-items:center;gap:6px;color:var(--merk);}

.punt-lijst li{display:flex;gap:11px;padding:10px 0;border-bottom:1px dashed var(--lijn);color:var(--inkt-zacht);}
.punt-lijst li:last-child{border-bottom:none;}
.punt-lijst li::before{content:'';flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;background:var(--merk);}

/* ---------- Twee-koloms mediablok ---------- */
.media-blok{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.media-blok--omgekeerd{direction:rtl;}
.media-blok--omgekeerd > *{direction:ltr;}
.media-blok__beeld{border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw);position:relative;}
.media-blok__beeld img{width:100%;height:100%;object-fit:cover;aspect-ratio:6/5;}
@media (max-width:860px){.media-blok{grid-template-columns:1fr;gap:34px;}.media-blok--omgekeerd{direction:ltr;}}

/* ===========================================================
   HET BORD — het dragende motief van deze demo
   -----------------------------------------------------------
   Was: een donker vlak met een foto van een krijtbord erachter
   en gestippelde kaders. Dat leest als "donkere sectie", niet
   als een bord: er stond niets óp geschreven. Nu is het een
   echt schoolbord — leisteen met korrel en veegsporen van de
   wisser, een houten lijst en een krijtgoot met twee krijtjes —
   en alles wat erop staat is met de hand getekend (SVG-paden
   met het ruw-filter #krijtruw). De krijtbordfoto is daarmee
   overbodig geworden.
   Contrast op de leisteen #1d2723:
   krijtwit  #eceee4 = 13,9:1 (AAA)
   krijtgeel #f0d99a = 10,3:1 (AAA)
   bodytekst #c3ccc0 =  9,1:1 (AAA)
   =========================================================== */

/* De filterdefinitie mag geen regelhoogte opeisen. */
.krijtdefs{position:absolute;width:0;height:0;overflow:hidden;}

/* ---------- Lijst en krijtgoot ---------- */
.bordlijst{padding:16px 16px 0;background:linear-gradient(180deg,#7a6144 0%,#5c4830 100%);border-radius:10px 10px 0 0;}
.bordgoot{
  height:26px;border-radius:0 0 11px 11px;position:relative;
  background:linear-gradient(180deg,#8a6c4b 0%,#6b5238 42%,#48371f 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 16px 30px -18px rgba(0,0,0,.75);
}
.bordgoot::before{content:'';position:absolute;left:38px;top:8px;width:70px;height:10px;border-radius:5px;background:linear-gradient(180deg,#f5f3ea,#cec9ba);box-shadow:0 1px 2px rgba(0,0,0,.4);}
.bordgoot::after{content:'';position:absolute;left:122px;top:9px;width:42px;height:8px;border-radius:4px;background:linear-gradient(180deg,#f0dca6,#c6b07e);box-shadow:0 1px 2px rgba(0,0,0,.4);}
@media (max-width:640px){.bordlijst{padding:10px 10px 0;}.bordgoot::before{left:18px;width:50px;}.bordgoot::after{left:78px;width:30px;}}

/* ---------- Het bordvlak ---------- */
.krijtbord{
  position:relative;isolation:isolate;overflow:hidden;color:var(--krijt-tekst);
  border-radius:4px;padding:64px 52px;
  background:
    radial-gradient(ellipse 55% 38% at 22% 26%,rgba(255,255,255,.055),transparent 72%),
    radial-gradient(ellipse 45% 28% at 78% 62%,rgba(255,255,255,.045),transparent 72%),
    radial-gradient(ellipse 70% 45% at 55% 108%,rgba(255,255,255,.04),transparent 70%),
    radial-gradient(ellipse 130% 105% at 50% 42%,rgba(255,255,255,.06),rgba(0,0,0,.42) 78%),
    var(--krijt-bg);
}
@media (max-width:640px){.krijtbord{padding:44px 24px;}}
/* korrel van de leisteen */
.krijtbord::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
/* veegsporen van de wisser */
.krijtbord::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(97deg,rgba(255,255,255,.028) 0 3px,transparent 3px 26px),
    repeating-linear-gradient(84deg,rgba(255,255,255,.02) 0 2px,transparent 2px 41px);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 40% 45%,#000 10%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 55% at 40% 45%,#000 10%,transparent 75%);
}
.krijtbord > *{position:relative;z-index:1;}
.krijtbord__inhoud{position:relative;z-index:1;}
/* ---------- Krijtletters ----------
   "Maak de letters in de hoofdtekst meer krijtachtig." De grote koppen
   gaan daarom door het zware filter (#krijtruw-zwaar): dat verschuift de
   rand niet alleen maar vreet hem ook aan, zodat de streek onderbroken
   raakt zoals krijt over een ruwe lei. De dubbele text-shadow eronder is
   de krijtstof die om de letter blijft hangen. */
.krijtbord h1,.krijtbord h2{
  font-family:var(--lettertype-krijt);font-weight:700;color:var(--krijt-tekst);
  letter-spacing:0;line-height:1.08;filter:url(#krijtruw-zwaar);
  text-shadow:
    0 0 14px rgba(236,238,228,.20),
    0 0 4px rgba(236,238,228,.16),
    0 0 1px rgba(236,238,228,.55);
}
.krijtbord h2{font-size:clamp(2.4rem,4vw + 1rem,3.6rem);}
.krijtbord h1{font-size:clamp(2.6rem,4.6vw + 1rem,4.4rem);}
/* Ook de tussenkoppen op het bord in krijt, niet in de schreefloze:
   anders blijft het bord half gedrukt en half geschreven. */
.krijtbord h3{
  font-family:var(--lettertype-hand);font-weight:400;font-size:1.22rem;
  color:var(--krijt-tekst);letter-spacing:.01em;filter:url(#krijtruw);
  text-shadow:0 0 8px rgba(236,238,228,.14);
}
/* Lopende tekst op het bord: wél de krijtbehandeling (kleur, stofglans,
   lichte ruwheid), maar niet het handschriftlettertype. Een alinea van
   vijf regels in Caveat is sfeervol en onleesbaar; dit houdt het
   leesbaar en laat het toch als krijt ogen. */
.krijtbord p,.krijttekst{
  color:#ccd4c9;
  text-shadow:0 0 8px rgba(236,238,228,.10);
}
/* Géén ruw-filter op lopende tekst. Op de eerste proef stond het er wel
   en dan ziet een alinea er niet krijtachtig uit maar aangevreten: de
   verschuiving werkt per pixel, dus bij 17 px letters vreet hij de
   stokken en lussen kapot. Op een kop van 60 px valt dezelfde
   verschuiving juist precies goed. Krijtgevoel in lopende tekst komt
   hier dus van de kleur en de stofglans, niet van vervorming. */
.krijtbord .held__intro,.krijtbord .bord__intro{letter-spacing:.008em;}
.krijtbord .voorkop{font-family:var(--lettertype-hand);text-transform:none;letter-spacing:.02em;font-size:1.08rem;font-weight:400;color:var(--krijt-geel);filter:url(#krijtruw);}
/* Het streepje van .voorkop::before hoort bij de gedrukte variant. Op het
   bord staat er handschrift, en zodra de kicker over twee regels loopt
   (smal scherm) blijft dat streepje op de eerste regel achter terwijl de
   tekst inspringt — dan leest het als een uitlijnfout. Weg ermee. */
.krijtbord .voorkop::before{display:none;}
.krijtbord p{color:#c3ccc0;}
.krijtbord a{color:var(--krijt-tekst);}
.krijtbord .knop--lijn{border-color:rgba(236,238,228,.5);color:var(--krijt-tekst);}
.krijtbord .knop--lijn:hover{border-color:var(--krijt-geel);color:var(--krijt-geel);background:transparent;}
.krijtbord .knop--vol{background:var(--merk);color:#fff;}
.krijtbord .knop--vol:hover{background:var(--merk-hover);color:#fff;}

/* ---------- Krijttekeningen ---------- */
.tek{display:block;overflow:visible;filter:url(#krijtruw);}
.tek path,.tek line,.tek polyline,.tek circle{
  fill:none;stroke:var(--krijt-tekst);stroke-linecap:round;stroke-linejoin:round;
}
.tek .dun{stroke-width:2;}
.tek .dik{stroke-width:3.4;}
.tek .geel{stroke:var(--krijt-geel);}
.tek .zacht{stroke:#b3bcae;opacity:.7;}
/* fijne onderbrekingen: krijt dat de leisteen niet overal raakt */
.tek .grein{stroke-dasharray:16 1.3 34 1 26 1.5;}
.krijtstreep{margin:8px 0 0;width:min(440px,80%);height:24px;}

/* Met de hand omcirkeld nummer */
.krijtnr{position:relative;width:64px;height:64px;flex:none;}
.krijtnr svg{position:absolute;inset:0;width:100%;height:100%;}
.krijtnr span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--lettertype-hand);font-size:1.7rem;color:var(--krijt-geel);filter:url(#krijtruw);}

/* Handgeschreven notitie */
.hand{font-family:var(--lettertype-hand);color:var(--krijt-geel);filter:url(#krijtruw);}

/* ---------- Stappen op het bord ---------- */
.krijt-stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
@media (max-width:860px){.krijt-stappen{grid-template-columns:repeat(2,1fr);gap:30px;}}
@media (max-width:560px){.krijt-stappen{grid-template-columns:1fr;}}
.krijt-stap{text-align:left;}
.krijt-stap h3{color:var(--krijt-tekst);font-family:var(--lettertype);font-size:1.05rem;margin:14px 0 7px;font-weight:700;}
.krijt-stap p{color:#b7c0b4;font-size:.92rem;margin:0;line-height:1.6;}

/* Kop van een bordsectie: tekst links, de geschetste gevels rechts. */
.bord__kop{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:start;}
.bord__schets{flex:none;width:min(280px,30vw);height:auto;margin-top:4px;}
@media (max-width:860px){.bord__kop{grid-template-columns:1fr;}.bord__schets{display:none;}}
.bord__voet{display:flex;align-items:center;gap:24px;margin-top:48px;padding-top:36px;border-top:1px dashed rgba(236,238,228,.22);flex-wrap:wrap;}
.bord__pijl{flex:none;}
.bord__notitie{font-size:1.25rem;margin:0;max-width:38ch;line-height:1.45;}
.bord__voetfoto{width:min(230px,100%);margin-left:auto;}
@media (max-width:860px){.bord__voetfoto{margin:8px auto 0;}}
@media (max-width:560px){.bord__pijl{display:none;}}

.krijt-citaat{font-family:var(--lettertype-krijt);font-size:clamp(1.6rem,2.4vw + 1rem,2.3rem);color:var(--krijt-tekst);line-height:1.35;max-width:820px;filter:url(#krijtruw);text-shadow:0 0 8px rgba(236,238,228,.12);}
.krijt-citaat cite{display:block;margin-top:18px;font-family:var(--lettertype);font-style:normal;font-weight:700;font-size:.9rem;color:var(--krijt-geel);filter:none;text-shadow:none;}

/* ---------- Het bord als paginakop ---------- */
.held--bord{padding:44px 0 76px;background:var(--vlak-zacht);}
@media (max-width:720px){.held--bord{padding:26px 0 48px;}}
/* Volgt er direct een tweede bord (zoals op "Onze aanpak"), geef dat
   dan extra lucht — twee donkere vlakken vlak op elkaar lezen anders
   als één blok. */
.held--bord + section{padding-top:92px;}
@media (max-width:720px){.held--bord + section{padding-top:56px;}}
.krijtbord--held{padding:72px 56px 76px;}
@media (max-width:720px){.krijtbord--held{padding:44px 24px 48px;}}
.krijtbord--held .held__raster{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:0;}
.krijtbord--held h1{max-width:14ch;}
.krijtbord--held .held__intro{color:#c3ccc0;max-width:52ch;margin-top:22px;font-size:1.08rem;}
.held__streep{width:min(440px,78%);}
.held__bordzijde{display:flex;flex-direction:column;align-items:center;gap:26px;}
.held__schets{width:min(280px,60%);height:auto;}
.held__bordzijde .geprikt{width:min(330px,100%);}
@media (max-width:900px){
  .krijtbord--held .held__raster{grid-template-columns:minmax(0,1fr);gap:40px;}
  .held__bordzijde{order:-1;flex-direction:row;justify-content:center;flex-wrap:wrap;}
  .held__schets{width:min(220px,45%);}
}
@media (max-width:560px){.held__schets{display:none;}}

/* Compacte bordkop voor de overige pagina's: hetzelfde bord, minder
   hoog, zodat het motief de hele site draagt zonder elke pagina
   evenveel ruimte op te eisen. */
.krijtbord--kop{padding:54px 52px 58px;}
@media (max-width:720px){.krijtbord--kop{padding:38px 24px 42px;}}
.krijtbord--kop h1{max-width:20ch;font-size:clamp(2.2rem,3.6vw + .9rem,3.4rem);}
.krijtbord--kop .held__intro{color:#c3ccc0;max-width:56ch;margin-top:20px;}
.krijtbord--kop .held__raster{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center;padding:0;}
.krijtbord--kop .held__raster--enkel{grid-template-columns:minmax(0,1fr);}
.krijtbord--kop .held__bordzijde .geprikt{width:min(300px,100%);}
@media (max-width:900px){
  .krijtbord--kop .held__raster{grid-template-columns:minmax(0,1fr);gap:36px;}
  .krijtbord--kop .held__bordzijde{order:-1;}
}

/* ---------- Foto op het bord: punaise én plakband ----------
   De klant vroeg om "een punaise of plakband — een combinatie van
   beide". Standaard (.geprikt--beide) krijgt elke foto dus een punaise
   bovenaan én een plakstrookje over beide onderhoeken. Dat is ook hoe
   het in het echt hangt: de punaise houdt hem vast, de strookjes houden
   de hoeken plat. De losse varianten blijven beschikbaar voor plekken
   waar één bevestiging genoeg is. */
.geprikt{
  position:relative;background:#f7f4ec;padding:12px 12px 16px;border-radius:2px;margin:0;
  transform:rotate(-1.6deg);box-shadow:0 22px 40px -20px rgba(0,0,0,.9);
}
.geprikt img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;border-radius:1px;}
.geprikt figcaption{font-family:var(--lettertype-hand);font-size:1rem;color:#3a423a;padding-top:10px;text-align:center;line-height:1.4;}

/* Plakband over de bovenrand (losse variant) */
.geprikt--plakband::before{
  content:'';position:absolute;left:50%;top:-14px;width:104px;height:28px;z-index:2;
  transform:translateX(-50%) rotate(-2.2deg);
  background:rgba(242,236,214,.72);box-shadow:0 2px 6px rgba(0,0,0,.35);
}
/* Plakband schuin over de twee onderhoeken (combinatievariant) */
.geprikt--beide::before,
.geprikt--beide::after{
  content:'';position:absolute;bottom:16px;width:76px;height:21px;z-index:2;
  background:rgba(242,236,214,.68);box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.geprikt--beide::before{left:-26px;transform:rotate(45deg);}
.geprikt--beide::after{right:-26px;transform:rotate(-45deg);}

/* De punaise zelf */
.punaise{position:absolute;left:50%;top:-24px;width:40px;height:44px;transform:translateX(-50%) rotate(1.6deg);z-index:3;pointer-events:none;}
.punaise svg{width:100%;height:100%;display:block;overflow:visible;}
.punaise__dome{fill:var(--merk);}
.punaise__glans{fill:rgba(255,255,255,.55);}
.punaise__pin{stroke:#8d8f88;stroke-width:3;stroke-linecap:round;}
.punaise__schaduw{fill:rgba(0,0,0,.28);}

/* Een portret is staand, geen 4/3-kiekje. */
.geprikt--portret img{aspect-ratio:4/5;}

/* Citaat met het portret ernaast opgeprikt */
.bord__citaatblok{display:grid;grid-template-columns:1fr minmax(0,280px);gap:52px;align-items:center;}
.bord__citaatfoto{display:flex;justify-content:center;}
@media (max-width:860px){
  .bord__citaatblok{grid-template-columns:minmax(0,1fr);gap:44px;}
  .bord__citaatfoto .geprikt{max-width:280px;margin:0 auto;}
}

/* Het stempeltje in de hoek van de foto */
/* Het stempeltje hangt in de bovenhoek tegenover de punaise. Eerst stond
   het onderaan, en daar dekte het het onderschrift af; halverwege lag het
   midden op de geportretteerde. De bovenhoek botst met geen van beide,
   ook niet bij een foto zonder onderschrift. */
.stempel{
  position:absolute;right:-14px;top:24px;z-index:4;
  font-family:var(--lettertype-hand);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--merk);border:2px solid var(--merk);border-radius:4px;
  padding:5px 10px;transform:rotate(-8deg);opacity:.72;
  background:rgba(247,244,236,.6);
}

/* ---------- Schrijfanimatie ----------
   Een veeg van links naar rechts, niet stroke-dashoffset: de korrel
   (.grein) zit al ín stroke-dasharray en die twee kunnen niet allebei
   op dezelfde eigenschap staan. Met clip-path blijft de korrel staan
   en lijkt de lijn toch geschreven te worden. De veeg leunt op
   dezelfde .in-beeld-klasse die de IntersectionObserver zet, dus een
   tekening draagt ook .reveal — maar zonder de verschuiving. */
.reveal.schrijf{transform:none;transition:opacity .45s ease;}
.schrijf{clip-path:inset(0 100% 0 0);}
.schrijf.in-beeld{animation:krijt-veeg 1.1s cubic-bezier(.3,.8,.4,1) forwards;}
.schrijf--traag.in-beeld{animation-duration:1.7s;animation-delay:.2s;}
@keyframes krijt-veeg{to{clip-path:inset(0 -3% 0 0);}}
@media (prefers-reduced-motion:reduce){
  .schrijf{clip-path:none;}
  .schrijf.in-beeld{animation:none;}
}

/* De lichte stappenlijst buiten het bord (.stappen / .stap /
   .stap__nummer) is vervallen: de vier stappen staan alleen nog op het
   bord, met een met de hand omcirkeld nummer (.krijtnr). */

/* ---------- Citaat (licht) ---------- */
.citaat{border-left:4px solid var(--merk);padding:6px 0 6px 28px;margin:0;}
.citaat p{font-size:1.22rem;font-style:italic;color:var(--inkt);}
.citaat cite{font-style:normal;font-weight:700;color:var(--inkt-zacht);font-size:.92rem;}

/* ---------- Statistieken ---------- */
.stat-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center;}
@media (max-width:640px){.stat-rij{grid-template-columns:1fr;}}
.stat b{display:block;font-size:2.6rem;font-weight:800;color:var(--merk);}
.sectie--donker .stat b{color:#fff;}
.stat span{color:var(--inkt-zacht);font-size:.92rem;}
.sectie--donker .stat span{color:#c3beb2;}

/* ---------- CTA-band ---------- */
.cta-band{background:var(--merk-vlak);color:#fff;border-radius:var(--radius);padding:56px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-band h2{color:#fff;margin-bottom:8px;}
.cta-band p{color:#cfd6d2;margin:0;}
@media (max-width:720px){.cta-band{flex-direction:column;text-align:center;padding:40px 26px;}}

/* ---------- Trainingen ---------- */
.training-kaart{border:1px solid var(--lijn);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;height:100%;background:#fff;transition:box-shadow var(--duur),transform var(--duur);position:relative;}
.training-kaart::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--merk);border-radius:var(--radius) var(--radius) 0 0;}
.training-kaart:hover{box-shadow:var(--schaduw);transform:translateY(-6px);}
.training-kaart__prijs{font-size:2rem;font-weight:800;color:var(--merk-vlak);margin:8px 0 4px;}
.training-kaart__prijs small{font-size:.9rem;font-weight:600;color:var(--inkt-zacht);}
.badge{display:inline-block;background:var(--merk);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:100px;}

/* ---------- Formulier ---------- */
.formulier{display:grid;gap:20px;max-width:640px;}
.veld{display:flex;flex-direction:column;gap:6px;}
.veld label{font-weight:700;font-size:.9rem;color:var(--inkt);}
.veld--verplicht label::after{content:' *';color:#b3261e;}
.veld input,.veld select,.veld textarea{
  font-family:var(--lettertype);font-size:1rem;padding:13px 16px;border:1.5px solid var(--lijn);border-radius:12px;
  background:#fff;color:var(--inkt);transition:border-color var(--duur);
}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--merk);box-shadow:0 0 0 3px rgba(181,80,45,.14);}
.veld textarea{resize:vertical;min-height:130px;}
.veld-fout{color:#b3261e;font-size:.86rem;}
.veld input.fout,.veld textarea.fout,.veld select.fout{border-color:#b3261e;}
.melding{padding:17px 22px;border-radius:12px;margin-bottom:22px;font-weight:600;}
.melding--succes{background:#e7f2ec;color:#1f7a4d;border:1px solid #bfe0cd;}
.melding--fout{background:#fbeaea;color:#b3261e;border:1px solid #f1c2be;}
.eer-veld{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;}
/* minmax(0,1fr) i.p.v. 1fr: anders krimpt een kolom niet onder zijn
   min-content en loopt het formulier op smalle schermen uit de omhulling. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr);}}

/* ---------- Contactkaart / infogrid ---------- */
.info-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start;}
@media (max-width:860px){.info-grid{grid-template-columns:minmax(0,1fr);gap:38px;}}
.info-lijst li{display:flex;gap:14px;padding:15px 0;border-bottom:1px dashed var(--lijn);}
.info-lijst li:last-child{border-bottom:none;}
.info-lijst b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--merk);margin-bottom:3px;}
.kaart-map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--lijn);height:280px;}
.kaart-map iframe{width:100%;height:100%;border:0;}

/* ---------- Footer ---------- */
.voet{background:var(--vlak-diep);color:#c9c4b8;padding:68px 0 30px;border-top:4px solid var(--merk);}
.voet a{color:#e2ddd0;}
.voet a:hover{color:#fff;}
.voet__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid #2c3733;}
@media (max-width:860px){.voet__raster{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.voet__raster{grid-template-columns:1fr;}}
.voet h4{color:#fff;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}
.voet ul li{margin-bottom:11px;font-size:.94rem;}
.voet__onder{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:10px;font-size:.86rem;color:#8f9790;}
.voet__onder a{color:#8f9790;}

/* ---------- Disclaimer ---------- */
.disclaimer{font-size:.8rem;color:var(--inkt-zacht);border-top:1px dashed var(--lijn);margin-top:28px;padding-top:18px;}

/* ---------- Oprichtersblok: portret + tekst ----------
   Demo 2 volgt de asymmetrische vormtaal van de hero: portret in een
   ronde beeldkaart met koperen accentvlak erachter, naam in Caveat. */
.oprichter{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:64px;align-items:center;}
.oprichter--compact{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:52px;}
/* Zonder tweede portret wordt het één gecentreerde tekstkolom op
   leesbreedte. Links uitgelijnd over de volle sectiebreedte zou de lege
   rechterhelft eruitzien als een foto die niet is geladen; gecentreerd
   leest het als een bewust tekstblok. Zodra portret-klant-2 er staat,
   valt het blok terug in de normale tweekolomsopmaak. */
.oprichter--zonder-beeld{grid-template-columns:minmax(0,1fr);justify-items:center;}
.oprichter--zonder-beeld > div{max-width:70ch;}
@media (max-width:860px){
  .oprichter,.oprichter--compact{grid-template-columns:1fr;gap:44px;}
}
.oprichter__portret{position:relative;max-width:400px;}
@media (max-width:860px){.oprichter__portret{max-width:340px;}}
.oprichter__portret-accent{
  position:absolute;left:-16px;bottom:-16px;width:64%;height:56%;
  border-radius:var(--radius);background:var(--merk);opacity:.18;
}
.oprichter__portret-kaart{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw);}
.oprichter__portret-kaart img{width:100%;height:auto;aspect-ratio:41/52;object-fit:cover;object-position:50% 12%;}
.oprichter__handtekening{
  font-family:var(--lettertype-krijt);font-weight:700;line-height:1.05;
  font-size:clamp(1.7rem,1.2vw + 1.3rem,2.15rem);color:var(--merk);margin:0 0 2px;
}
.oprichter__rol{font-size:.9rem;color:var(--inkt-zacht);margin:0 0 24px;}
.oprichter__lead{font-size:1.1rem;color:var(--inkt);}
.oprichter__vakken{font-weight:700;color:var(--inkt);margin-bottom:.6em;}
.oprichter__bel{display:inline-block;margin-top:6px;font-weight:700;color:var(--merk);}
.oprichter__bel:hover{color:var(--merk-hover);}

/* ---------- Keurmerken en lidmaatschappen ----------
   Donkere band met witte tegels, zodat de logo's op antraciet
   leesbaar blijven; gelijke optische hoogte per logo via --keurmerk-h. */
.keurmerken-band{background:var(--vlak-diep);border-radius:var(--radius);padding:40px 44px;}
@media (max-width:560px){.keurmerken-band{padding:28px 20px;}}
.keurmerken__kop{display:block;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c8b19f;margin:0 0 22px;}
.keurmerken__rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
@media (max-width:760px){.keurmerken__rij{grid-template-columns:repeat(2,minmax(0,1fr));}}
.keurmerk{background:#fff;border-radius:14px;padding:18px 14px;display:flex;align-items:center;justify-content:center;min-height:112px;}
.keurmerk > a{display:flex;align-items:center;justify-content:center;}
.keurmerk img{height:var(--keurmerk-h,44px);width:auto;max-width:100%;object-fit:contain;}
@media (max-width:560px){
  .keurmerk{min-height:92px;padding:14px 10px;}
  .keurmerk img{height:calc(var(--keurmerk-h,44px) * .84);}
}

/* ---------- Reveal-animaties ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1);}
.reveal.in-beeld{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .kaart:hover,.knop--vol:hover,.knop--lijn:hover{transform:none;}
}

/* ---------- 404 ---------- */
.niet-gevonden{text-align:center;padding:130px 0;}

/* ---------- Skiplink ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--merk-vlak);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 10px 0;}
.skip-link:focus{left:0;}