/* MB Techniek - stijlblad */
/* Lettertypes, meegeleverd met de site. Er gaat niets naar Google. */
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/archivo-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/archivo-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-display:swap;font-weight:200 900;
  src:url(fonts/source-serif-4-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-display:swap;font-weight:200 900;
  src:url(fonts/source-serif-4-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme: light only;
  --lei:#14191d; --leidiep:#131c21; --lood:#4a4234; --staal:#8b8471;
  --kalk:#e9dcc6; --wit:#f3ece0; --lijn:#d6c6a8;
  --patina:#397262;
  --zand:#c8a369;      /* achtergrondkleur uit het logo */
  --koper:#8a6432;     /* donkere variant, voor tekst en randen op licht */
  --koperop:#c8a369;   /* de zandtint zelf, voor gebruik op donker */
  --flits:#f5c518;
  --kop:"Archivo","Helvetica Neue",Arial,sans-serif;
  --tekst:"Source Serif 4",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:#f3ece0}
body{margin:0;background:#f3ece0;color:#14191d;font-family:var(--tekst);
  font-size:1.125rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--koper);text-underline-offset:3px}
a:hover{color:var(--lei)}
:focus-visible{outline:3px solid var(--flits);outline-offset:3px}
h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:1.12;
  letter-spacing:-.015em;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2rem,5.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,4vw,2.3rem)}
h3{font-size:1.15rem;letter-spacing:-.005em}
p{margin:0 0 1.1em;max-width:62ch}
.wrap{width:min(100% - 2.5rem,1180px);margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--flits);color:var(--lei);
  padding:.7rem 1.1rem;font-family:var(--kop);font-weight:600}
.skip:focus{left:1rem;top:1rem;z-index:99}

.top{background:#1b262c;color:var(--kalk);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;padding:.85rem 0;flex-wrap:wrap}
.merk{display:block;line-height:0}
.merk img{height:58px;width:auto}
.voet .logo{height:64px;width:auto;margin-bottom:1rem}
.top nav ul{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;
  font-family:var(--kop);font-size:.9rem;font-weight:600;flex-wrap:wrap}
.top nav a{display:inline-flex;align-items:center;min-height:40px;
  padding:.4rem .9rem;border-radius:6px;color:#e7ebea;text-decoration:none;
  background:#2a3840;border:1px solid #3a4b55;
  transition:background .14s ease,color .14s ease}
.top nav a:hover{background:#3a4b55;color:#fff}
.top nav a[aria-current="page"]{background:var(--flits);color:#14191d;border-color:var(--flits)}

.held{background:#1b262c;color:var(--kalk);padding:3.2rem 0 3.5rem;overflow:hidden}
.held .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.held h1{color:var(--wit)}
.held .lead{font-size:1.2rem;color:#e2e5e3;max-width:46ch}
.held .ook{font-size:1.02rem;color:#c3c8c6;max-width:48ch;
  border-left:2px solid var(--zand);padding-left:.9rem}
.generatie{font-family:var(--kop);font-size:.88rem;font-weight:600;
  color:var(--flits);margin-bottom:1.1rem}
.tekening{max-width:330px;width:100%;margin-inline:auto}
.o{fill:none;stroke:#8d8371;stroke-width:1.4}
.v{fill:#242c31;stroke:#8d8371;stroke-width:1.4}
.m{stroke:#5f5849;stroke-width:.75;stroke-dasharray:3 4;fill:none}
.p{fill:#9a9180;font-family:var(--kop);font-size:9px}
.l{fill:none;stroke:var(--koperop);stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:640;stroke-dashoffset:640;
  animation:trek 2.4s cubic-bezier(.4,0,.2,1) .3s forwards}
.haan{fill:var(--flits)}
@keyframes trek{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .l{animation:none;stroke-dashoffset:0}}

.knop{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--kop);font-weight:700;font-size:1.02rem;letter-spacing:-.005em;
  min-height:52px;padding:.85rem 1.7rem;border-radius:6px;
  border:1px solid transparent;background:var(--flits);color:#14191d;
  text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.18);
  transition:transform .1s ease, box-shadow .1s ease, background .15s ease}
.knop:hover{background:#ffd42b;color:#14191d}
.knop:active{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.28)}
.knop.leeg{background:#33424b;color:#f4f6f5;border-color:#4d5f69;
  box-shadow:0 2px 0 rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.2)}
.knop.leeg:hover{background:#3e4f59;color:#fff}
.knop.donker{background:var(--lei);color:var(--wit);border-color:var(--lei)}
.knop.donker:hover{background:#26333b;color:var(--wit)}
.knoppen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

.sec{padding:4rem 0;background:#f3ece0;color:#14191d}
.sec--kalk{background:#e9dcc6;color:#14191d}
.sec--lei{background:#131c21;color:#eef0ef}
.sec--lei h2,.sec--lei h3{color:var(--wit)}
.sec--lei a{color:var(--flits)}
.seckop{max-width:62ch;margin-bottom:2.4rem}
.seckop p{color:#252c31;font-size:1.14rem;margin-bottom:0}
.sec--lei .seckop p{color:#dfe3e2}

/* Sint-Jan uitgelicht */
.jan{background:#131c21;color:var(--kalk);padding:3.5rem 0;
  border-top:3px solid var(--zand)}
.jan .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.jan img{width:100%;aspect-ratio:3/4;max-height:540px;object-fit:cover;
  object-position:center 30%;border-radius:4px}
.jan h2{color:var(--wit)}
.jan .waar{font-family:var(--kop);font-size:.82rem;font-weight:600;
  color:var(--flits);margin-bottom:.6rem}
.jan p{color:#dde0de}

/* generaties */
.tijdlijn{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.8rem}
.tijdlijn li{border-top:2px solid var(--koper);padding-top:.9rem}
.tijdlijn b{display:block;font-family:var(--kop);font-size:1.5rem;
  font-weight:700;letter-spacing:-.02em;margin-bottom:.25rem}
.tijdlijn span{font-size:1rem;color:#252c31}

.diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--lijn)}
.dienst{padding:1.7rem 1.5rem 1.7rem 0;border-bottom:1px solid var(--lijn);
  border-right:1px solid var(--lijn)}
.dienst:last-child{border-right:none}
.dienst h3{margin-bottom:.35rem}
.dienst p{margin-bottom:0;font-size:1.02rem;color:#252c31}
.norm{display:block;font-family:var(--kop);font-size:.76rem;font-weight:600;
  color:var(--patina);margin-bottom:.5rem}

.uitleg{display:grid;grid-template-columns:1fr 1.7fr;gap:2.5rem;
  padding:2.4rem 0;border-top:2px solid var(--lei);align-items:start}
.uitleg:last-of-type{border-bottom:2px solid var(--lei)}
.uitleg h3{font-size:1.45rem;margin-bottom:.25rem}
.uitleg .norm{font-size:.82rem}
.lijst{list-style:none;padding:0;margin:0;max-width:62ch}
.lijst li{position:relative;padding-left:1.5rem;margin-bottom:.5rem}
.lijst li::before{content:"";position:absolute;left:0;top:.68em;
  width:.7rem;height:2px;background:var(--koper)}

.proj{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2rem}
.kaart{border-top:2px solid var(--koper);padding-top:1.1rem}
.kaart video,.kaart img,.kaart .ph{width:100%;aspect-ratio:4/3;object-fit:cover;
  background:#2b2419;margin-bottom:1rem;border-radius:4px}
.kaart img.staand{aspect-ratio:3/4;object-position:center 35%}
.ph{display:grid;place-items:center;color:#9a917f;font-family:var(--kop);font-size:.82rem}
.kaart h3{margin-bottom:.2rem}
.kaart .waar{font-family:var(--kop);font-size:.78rem;font-weight:600;
  color:var(--patina);margin-bottom:.7rem}
.kaart p{font-size:1.02rem;margin-bottom:0}

.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2rem 2.4rem}
.feit{border-left:3px solid var(--koper);padding-left:1.1rem}
.feit h3{font-size:1.02rem;margin-bottom:.3rem}
.feit p{font-size:1rem;margin-bottom:0;color:#252c31}
.sec--lei .feit p{color:#d6dad9}
.sec--lei .feit{border-left-color:var(--zand)}
.sec--lei .lijst li::before{background:var(--zand)}

.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem}
.gegevens{font-style:normal;margin:0}
.gegevens dt{font-family:var(--kop);font-size:.78rem;font-weight:600;
  color:var(--patina);margin-top:1.2rem}
.gegevens dd{margin:.15rem 0 0;font-size:1.03rem}
form label{display:block;font-family:var(--kop);font-size:.83rem;
  font-weight:600;margin:1.05rem 0 .35rem}
form input,form select,form textarea{width:100%;padding:.7rem .85rem;
  font-family:var(--tekst);font-size:1rem;color:var(--lei);background:#fbf7f0;
  border:1px solid #8a7a5e;border-radius:4px}
form textarea{min-height:7rem;resize:vertical}
form .knop{margin-top:1.4rem;cursor:pointer}
.klein{font-size:.9rem;color:var(--lood);margin-top:1rem}

.oproep{background:#c8a369;color:var(--lei);padding:3rem 0}
.oproep h2{color:var(--lei)}
.oproep p{color:#4a3d26;font-size:1.08rem}
.oproep .knop{border-color:var(--lei);background:var(--lei);color:var(--wit)}
.oproep .knop:hover{background:transparent;color:var(--lei)}

.voet{background:#1b262c;color:#c6cbc9;padding:3rem 0 2rem;font-size:.94rem}
.voet a{color:var(--kalk)}
.voet a:hover{color:var(--flits)}
.voet h3{font-size:.8rem;font-weight:600;color:var(--zand);margin-bottom:.7rem}
.voetrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:.4rem}
.voet p{max-width:40ch}
.fijn{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid #3a3327;
  font-size:.84rem;color:#8a8271}

@media(max-width:860px){
  .held .wrap,.jan .wrap{grid-template-columns:1fr;gap:2rem}
  .tekening{max-width:230px}
  .jan img{max-height:320px}
  .uitleg,.contact{grid-template-columns:1fr;gap:1.3rem}
  .dienst{border-right:none;padding-right:0}
  .top{position:static}
  .top .wrap{flex-direction:column;align-items:flex-start;gap:.7rem}
  .merk img{height:48px}
  .top nav ul{gap:.9rem 1.1rem}
  .sec{padding:3rem 0}
}
.recensies{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.recensie{margin:0;border-top:2px solid var(--koper);padding-top:1.2rem}
.recensie p{font-size:1.05rem;margin-bottom:1rem}
.recensie p::before{content:"\201C"}
.recensie p::after{content:"\201D"}
.recensie cite{font-style:normal;font-family:var(--kop);font-size:.9rem;font-weight:600;display:block}
.recensie cite span{display:block;font-weight:400;font-size:.82rem;color:var(--patina);margin-top:.15rem}
.recensie.leeg{opacity:.55}
.recensie.leeg p{color:var(--lood)}
.sec--lei .recensie{border-top-color:var(--zand)}
.bol{fill:none;stroke:var(--zand);stroke-width:1.6}
.bol.stip{stroke-dasharray:6 5}
.pt{fill:var(--zand)}
.vlak{fill:#242c31;stroke:#8d8371;stroke-width:1.4}
.dun{fill:none;stroke:#8d8371;stroke-width:1}
.pijl{stroke:#9a9180;stroke-width:.9;fill:none}
.tabelwrap{overflow-x:auto;margin:1.5rem 0 0}
table.klassen{border-collapse:collapse;width:100%;min-width:520px;font-size:.98rem}
table.klassen th,table.klassen td{text-align:left;padding:.7rem .8rem;
  border-bottom:1px solid var(--lijn);vertical-align:top}
table.klassen thead th{font-family:var(--kop);font-size:.86rem;font-weight:700;
  border-bottom:2px solid var(--lei);white-space:nowrap}
table.klassen tbody th{font-family:var(--kop);font-size:.86rem;font-weight:600;
  color:var(--lood);white-space:nowrap}
table.klassen td{font-variant-numeric:tabular-nums}
table.klassen tbody tr:last-child th,table.klassen tbody tr:last-child td{border-bottom:none}
.uitgelicht{background:#e3d4ba;border-left:3px solid var(--koper);
  padding:1.1rem 1.3rem;margin-top:1.6rem}
.uitgelicht p{margin-bottom:0}
.sec--kalk .uitgelicht{background:#f3ece0}